mpen mpen - 1 month ago 8
CSS Question

How to get horizontal scrollbar to appear beneath content?

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.


Answer

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>