html - Generate scroll bar for overflow to the left

Question

This code makes the browser have a horizontal scroll bar when the content is bigger than the window, overflowing to the right:

div.a {
  position: relative;
  float: left;
  background-color: red;
}
div.b {
  position: absolute;
  top: 100%;
  left: 100%;
  background-color: blue;
  white-space: nowrap;
}

<div class="a">Text1
  <div class="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>

Answer 1

as you have a very specific example will something like this work for you? I did have to use a little jquery (you can do it with javascript). If you don't have any other content that will be affected you could place a rtl on the HTML tag and keep your absolute position on the element.

if ($("#b").prop('scrollWidth') > $("body").width() ) { //Security Check
  $('html').css('direction', 'rtl');
}
else {
  $('html').css('direction', 'ltr');
}

div.a
{
  position: relative;
  float: right;
  background-color: red;
}
div.b
{
  position: absolute;
  top: 100%;
  right: 100%;
  background-color: blue;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Text1
  <div class="b" id="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>