Horizontal scrolling of sticky header doesn't working

Question

I have a sticky header on my page, but I found a bug that buttons on right side of sticky header is not visible when browser window is small... and horizontal scrolling does not work for hearder.

Here is html code:

<div class="search-container">
   <div class="sticky-wrapper">
     <!-- it's fixed header -->
   </div>
   <div class="sidebar">
     <!-- search filters e.g. -->
   </div>
   <div class="content">
     <!-- search results e.g. -->
   </div>
</div>

Here is my CSS (sass) code:

.search-container {

  .sticky-wrapper {
    box-shadow: 0 3px 3px 0 #8f8f8f;
    position: fixed;
    top: 0;
    z-index: 999;
  }

  .sidebar {
    float: left;
    margin-left: 5px;
    width: 229px;
  }

  .content {
    background: none repeat scroll 0 0 #fff;
    border-top: 4px solid #5d5d5d;
    display: inline;
    float: left;
    margin-left: 18px;
    margin-right: 0;
    width: 691px !important;
  }
} 

When I make browser window smaller then (sidebar + content) width, horizontal scrolling appears - but it works only for .sidebar and .content.

How can I make sticky header horizontal-scrollable too?

PS it's important to working in FF, Chrome, IE >= 9. And I it not good to change/add new css ids or classes, cause many tests become broken.

Please, help. Thanks kindly.

If it will be helpful - jsfiddle with header and content

Answer 1

I think CSS alone cannot handle this scenario. It would be better if you add a pinch of JS flavour. Try this Fiddle .

Added a JS code: (Note: I have used JQuery, you can also have it rewritten in pure JS if required)

$(window).scroll(function() {
  var max_width = 990;   
  if ($(window).width() < max_width) {
    $('.sticky-wrapper').css('margin-left', -$(this).scrollLeft() + "px");
  }
});

Answer 2

For what I could test, and for previous experience, is to add a div inside with a width bigger than the container one, and to that container add an overflow-x: auto;

For example:

<div class="sticky-wrapper">
    <div class="bigger">Your text here</div>
</div>

.sticky-wrapper {
    box-shadow: 0 3px 3px 0 #8f8f8f;
    position: fixed;
    top: 0;
    z-index: 999;
    background: grey;
    width: 900px;
    overflow-x: auto;
}
.bigger {
    width: 1000px;
}

Fiddle: https://jsfiddle.net/afs5k1zp/1/