I'm attempting to create a horizontal line across an overflowing flex container by using an absolutely positioned child element with both the left and right set to 0. This requires the container to have a relative position to contain the absolutely positioned element, but this is where I encounter difficulties.
Due to the container having a relative position, the right value of the children does not extend to the edge of the scroll view; instead, it stops at the beginning of the overflow.
Check out this CodePen example
HTML Code:
<div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
CSS Code:
body > div {
display: flex;
overflow-x: scroll;
position: relative;
}
body > div::before {
content: '';
position: absolute;
top: 150px;
left: 0;
right: 0;
height: 4px;
width: 100%;
background: #000;
}
div > div {
align-items: stretch;
position: relative;
min-width: 900px;
height: 300px;
}
Is there a way to make the child element span the entire container, even when there is overflow?