How to get horizontal scrollbar to appear beneath content?


Tags: css,position,scrollbar

Problem :

Pick your poison:

.VehicleTimeline_root_3m9Bh {
  width: 100%;
  border: 1px solid #e7eaec;
  position: relative;
}
.VehicleTimeline_unitNumbers_2JJyk {
  width: 45px;
  margin-top: 20px;
}
.VehicleTimeline_row_2A9QX {
  height: 20px;
  width: 100%;
}
.VehicleTimeline_row_2A9QX:nth-child(even) {
  background-color: rgba(235, 235, 235, 0.5);
}
.VehicleTimeline_code_3ux_j {
  display: table-cell;
  padding: 3px 0;
  height: 20px;
  text-align: center;
  border-right: 1px solid #e7eaec;
  white-space: nowrap;
  width: 45px;
  box-sizing: border-box;
  overflow: hidden;
}
.VehicleTimeline_hrblock_2Wfuc {
  display: inline-block;
  padding: 2px 0 0 2px;
  border-right: 1px solid #e7eaec;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  top: 0;
  bottom: 0;
}
.VehicleTimeline_hrblock_2Wfuc:first-child {
  border-left: none;
}
.VehicleTimeline_hrblock_2Wfuc:last-child {
  border-right: none;
}
.VehicleTimeline_hrblock_2Wfuc:nth-child(odd) {
  background-color: rgba(230, 230, 230, 0.5);
}
.VehicleTimeline_scroll_2WSry {
  overflow-x: scroll;
  overflow-y: hidden;
  position: absolute;
  box-sizing: content-box;
  left: 45px;
  top: 0;
  bottom: 0;
  right: 0;
}
<div data-reactroot="" class="VehicleTimeline_root_3m9Bh">
  <div class="VehicleTimeline_unitNumbers_2JJyk">
    <div class="VehicleTimeline_row_2A9QX">
      <div class="VehicleTimeline_code_3ux_j" title="Mercedes Sprinter" style="background-color: rgb(206, 37, 154); color: rgb(254, 244, 249);">LV</div>
    </div>
    <div class="VehicleTimeline_row_2A9QX">
      <div class="VehicleTimeline_code_3ux_j" title="Lincoln Navigator (14pax)" style="background-color: rgb(0, 0, 0); color: rgb(246, 246, 246);">SUV</div>
    </div>
    <div class="VehicleTimeline_row_2A9QX">
      <div class="VehicleTimeline_code_3ux_j" title="Limo Bus #2" style="background-color: rgb(51, 204, 255); color: rgb(0, 46, 61);">WB</div>
    </div>
  </div>
  <div class="VehicleTimeline_scroll_2WSry">
    <div class="VehicleTimeline_timeContainer_2-DVe">
      <div class="VehicleTimeline_row_2A9QX">
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 0px; width: 60px;">
          <!-- react-text: 13 -->1
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 60px; width: 60px;">
          <!-- react-text: 16 -->2
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 120px; width: 60px;">
          <!-- react-text: 19 -->3
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 180px; width: 60px;">
          <!-- react-text: 22 -->4
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 240px; width: 60px;">
          <!-- react-text: 25 -->5
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 300px; width: 60px;">
          <!-- react-text: 28 -->6
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 360px; width: 60px;">
          <!-- react-text: 31 -->7
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 420px; width: 60px;">
          <!-- react-text: 34 -->8
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 480px; width: 60px;">
          <!-- react-text: 37 -->9
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 540px; width: 60px;">
          <!-- react-text: 40 -->10
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 600px; width: 60px;">
          <!-- react-text: 43 -->11
          <!-- /react-text --><sup>pm</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 660px; width: 60px;">
          <!-- react-text: 46 -->12
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 720px; width: 60px;">
          <!-- react-text: 49 -->1
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 780px; width: 60px;">
          <!-- react-text: 52 -->2
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 840px; width: 60px;">
          <!-- react-text: 55 -->3
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 900px; width: 60px;">
          <!-- react-text: 58 -->4
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 960px; width: 60px;">
          <!-- react-text: 61 -->5
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1020px; width: 60px;">
          <!-- react-text: 64 -->6
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1080px; width: 60px;">
          <!-- react-text: 67 -->7
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1140px; width: 60px;">
          <!-- react-text: 70 -->8
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1200px; width: 60px;">
          <!-- react-text: 73 -->9
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1260px; width: 60px;">
          <!-- react-text: 76 -->10
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1320px; width: 60px;">
          <!-- react-text: 79 -->11
          <!-- /react-text --><sup>am</sup></div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1380px; width: 60px;">
          <!-- react-text: 82 -->12
          <!-- /react-text --><sup>pm</sup></div>
      </div>
      <div class="VehicleTimeline_row_2A9QX">xxxxx</div>
      <div class="VehicleTimeline_row_2A9QX">xxxxx</div>
      <div class="VehicleTimeline_row_2A9QX">xxxxx</div>
    </div>
  </div>
</div>

How can I get the horizontal scrollbar to move down so that the top edge of the scrollbar is aligned with the bottom edge of "WB"?

i.e. there should be 3 rows with XXXs in them and the scrollbar shouldn't be covering them.



Solution :

Short answer:

Remove: bottom: 0; from .VehicleTimeline_scroll_2WSry class.


Explanation:

By setting bottom: 0; along with top: 0; in .VehicleTimeline_scroll_2WSry class with absolute position, modern browsers render the element similar as if it had height: 100%;.

Because your parent element with relative position has a total height of 60px, the child with absolute position, which is bigger, now overflows, but overflow-y is hidden in the parent element, so there is no scrollbar.


To avoid this just remove the property bottom from the class.

.VehicleTimeline_root_3m9Bh {
  width: 100%;
  //display: table;
  border: 1px solid #e7eaec;
  position: relative;
}
.VehicleTimeline_unitNumbers_2JJyk {
  width: 45px;
  margin-top: 20px;
}
.VehicleTimeline_row_2A9QX {
  height: 20px;
  width: 100%;
  &: nth-child(even) {
    background-color: rgba(235, 235, 235, .5);
  }
}
.VehicleTimeline_code_3ux_j {
  display: table-cell;
  padding: 3px 0;
  height: 20px;
  text-align: center;
  border-right: 1px solid #e7eaec;
  white-space: nowrap;
  width: 45px;
  box-sizing: border-box;
  overflow: hidden;
}
.VehicleTimeline_hrblock_2Wfuc {
  display: inline-block;
  padding: 2px 0 0 2px;
  border-right: 1px solid #e7eaec;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  top: 0;
  bottom: 0;
  &: first-child {
    border-left: none;
  }
  &:last-child {
    border-right: none;
  }
  &:nth-child(odd) {
    background-color: rgba(230, 230, 230, .5);
  }
}
.VehicleTimeline_scroll_2WSry {
  overflow-x: scroll;
  overflow-y: hidden;
  position: absolute;
  box-sizing: content-box;
  left: 45px;
  top: 0;
  right: 0;
}
<div data-reactroot="" class="VehicleTimeline_root_3m9Bh">
  <div class="VehicleTimeline_unitNumbers_2JJyk">
    <div class="VehicleTimeline_row_2A9QX">
      <div class="VehicleTimeline_code_3ux_j" title="Mercedes Sprinter" style="background-color: rgb(206, 37, 154); color: rgb(254, 244, 249);">LV</div>
    </div>
    <div class="VehicleTimeline_row_2A9QX">
      <div class="VehicleTimeline_code_3ux_j" title="Lincoln Navigator (14pax)" style="background-color: rgb(0, 0, 0); color: rgb(246, 246, 246);">SUV01</div>
    </div>
    <div class="VehicleTimeline_row_2A9QX">
      <div class="VehicleTimeline_code_3ux_j" title="Limo Bus #2" style="background-color: rgb(51, 204, 255); color: rgb(0, 46, 61);">WB</div>
    </div>
  </div>
  <div class="VehicleTimeline_scroll_2WSry">
    <div class="VehicleTimeline_timeContainer_2-DVe">
      <div class="VehicleTimeline_row_2A9QX">
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 0px; width: 60px;">
          <!-- react-text: 13 -->1
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 60px; width: 60px;">
          <!-- react-text: 16 -->2
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 120px; width: 60px;">
          <!-- react-text: 19 -->3
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 180px; width: 60px;">
          <!-- react-text: 22 -->4
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 240px; width: 60px;">
          <!-- react-text: 25 -->5
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 300px; width: 60px;">
          <!-- react-text: 28 -->6
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 360px; width: 60px;">
          <!-- react-text: 31 -->7
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 420px; width: 60px;">
          <!-- react-text: 34 -->8
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 480px; width: 60px;">
          <!-- react-text: 37 -->9
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 540px; width: 60px;">
          <!-- react-text: 40 -->10
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 600px; width: 60px;">
          <!-- react-text: 43 -->11
          <!-- /react-text --><sup>pm</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 660px; width: 60px;">
          <!-- react-text: 46 -->12
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 720px; width: 60px;">
          <!-- react-text: 49 -->1
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 780px; width: 60px;">
          <!-- react-text: 52 -->2
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 840px; width: 60px;">
          <!-- react-text: 55 -->3
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 900px; width: 60px;">
          <!-- react-text: 58 -->4
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 960px; width: 60px;">
          <!-- react-text: 61 -->5
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1020px; width: 60px;">
          <!-- react-text: 64 -->6
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1080px; width: 60px;">
          <!-- react-text: 67 -->7
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1140px; width: 60px;">
          <!-- react-text: 70 -->8
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1200px; width: 60px;">
          <!-- react-text: 73 -->9
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1260px; width: 60px;">
          <!-- react-text: 76 -->10
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1320px; width: 60px;">
          <!-- react-text: 79 -->11
          <!-- /react-text --><sup>am</sup>
        </div>
        <div class="VehicleTimeline_hrblock_2Wfuc" style="left: 1380px; width: 60px;">
          <!-- react-text: 82 -->12
          <!-- /react-text --><sup>pm</sup>
        </div>
      </div>
      <div class="VehicleTimeline_row_2A9QX">xxxxx</div>
      <div class="VehicleTimeline_row_2A9QX">xxxxx</div>
      <div class="VehicleTimeline_row_2A9QX">xxxxx</div>
    </div>
  </div>
</div>


    CSS Howto..

    CSS- How to align background image over bottom border line? Jsfiddle included

    How can I have an image float next to a centered div?

    How to Fix: iOS drops CSS files when javascript changes DOM

    How is better to do with CSS sprites [closed]

    How to program an
      image gallery, where the hover effect impacts more than 1 element? [closed]

    Responsive CSS: Replicating how Facebook's chat panel disappears below a certain browser window width

    How browser renders HTML

    How to implement multiple background-images for an id / class with the same CSS code?

    How to hide table row overflow (take 2)

    how to remove elements in document fragment after append

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    How to set % height in fluid layout?

    How to make a background color stretch to left and right of viewport in Safari Browsers

    How to build a simple CSS layout that expands to the viewport?

    Rollover table shows hidden span class text with css

    How to include several nested CSS classes into rails .erb file?

    jquery how to make an element comeback to initial position after animation

    How to make a jQuery step animation?

    How do you create a transparent overlay with text upon mouse hover?

    How to clear the bottom of an image like clear left / right

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How to get started creating CSS for given (dynamically generated) HTML?

    How to transform to <%= link_to %> with css?

    In order to output in erb exactly what you have in your original html, you could use the following: <li> <%= link_to user_path do %> <span>User</span> <% end %> </li>...
    Read more

    How to add a new CSS class to a Link Badge if the value is 0?

    How to select odd child of dl element with css?

    How to center two elements which are separately wrapped in ?

    How to make a button with nice border - inside class HTML / CSS

    How can I scale element height and width using CSS?

    CSS float: how to form the second row based on tallest DIV?

    Modernizr: how do I detect CSS display:table-cell support?