如何让水平滚动条出现在内容下方？
How to get horizontal scrollbar to appear beneath content?
选择你的毒药：
.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>
如何让水平滚动条向下移动，使滚动条的上边缘与"WB"的下边缘对齐？
即应该有 3 行，其中包含 XXX，并且滚动条不应覆盖它们。
您可以设置固定高度：.VehicleTimeline_scroll_2WSry {height: 98px}
或添加负边距底部：.VehicleTimeline_scroll_2WSry {margin-bottom: -14px}.
简答：
删除：bottom: 0; 来自 .VehicleTimeline_scroll_2WSry class。
解释：
通过在 .VehicleTimeline_scroll_2WSry class 中将 bottom: 0; 和 top: 0; 设置为绝对位置，现代浏览器会呈现类似 height: 100%; 的元素。
因为你的相对位置的父元素总高度为60px，绝对位置的子元素更大，现在 overflows，但是overflow-y隐藏在父元素，所以没有滚动条。
为避免这种情况，只需从 class.
中删除 属性 bottom
.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>
选择你的毒药：
.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>
如何让水平滚动条向下移动，使滚动条的上边缘与"WB"的下边缘对齐？
即应该有 3 行，其中包含 XXX，并且滚动条不应覆盖它们。
您可以设置固定高度：.VehicleTimeline_scroll_2WSry {height: 98px}
或添加负边距底部：.VehicleTimeline_scroll_2WSry {margin-bottom: -14px}.
简答：
删除：bottom: 0; 来自 .VehicleTimeline_scroll_2WSry class。
解释：
通过在 .VehicleTimeline_scroll_2WSry class 中将 bottom: 0; 和 top: 0; 设置为绝对位置，现代浏览器会呈现类似 height: 100%; 的元素。
因为你的相对位置的父元素总高度为60px，绝对位置的子元素更大，现在 overflows，但是overflow-y隐藏在父元素，所以没有滚动条。
为避免这种情况，只需从 class.
中删除 属性bottom
.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>