html - Can a scroll bar appear for content overflowing the browser window to the left? -

this code makes browser have horizontal scroll bar when content bigger window, overflowing 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>

but if make first div float right , second positioned left of it, browser doesn't make horizontal scroll bar, , overflowing text can't viewed.

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

<div class="a">    text1    <div class="b">      text2 text2 text2 text2 text2 text2 text2 text2    </div>  </div>

can change behaviour somehow, able scroll left if content bigger window, overflowing left?

tested on ff 47, ie 11, opera 38 - same thing.

if behaviour can't changed html/css, reason browsers choose do? there reason why couldn't 'fixed'? wouldn't current behaviour problematic sites catering solely right-to-left languages, assume want able use layouts this?

as have specific example work you? did have use little jquery (you can javascript). if don't have other content affected place rtl on html tag , keep absolute position on 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>