I have been stuck with this simple problem for a while now. It might be a duplication but I couldn't find a similar problem online.
I am trying to make the green bar height 100% (to have the same height as the red parent).
Here is a codepen if it helps: https://codepen.io/tartie2/pen/NWYZpgj
Here is the code:
div {
background-color:red;
height:200px;
width:300px;
position: relative;
overflow: auto;
}
div::after{
content: '';
position:absolute;
top: 0;
left: 0;
min-height: 100%;
width:10px;
background-color: green;
}<div>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</div>The parent has an explicit height of 200px. The ::after element is trying to fill that height. If you remove the height property from the parent then the pseudo element will fill up the entire height of the parent.
div {
background-color: red;
width: 300px;
position: relative;
overflow: auto;
}
div::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 10px;
background-color: green;
}<div>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</div>Try this:
.wrapper {
width: 200px;
height: 200px;
display: flex;
flex-direction: row;
}
.green-bar,
.content {
height: 100%;
}
.green-bar {
width: 10px;
background-color: green;
}
.content {
padding-left: 10px;
background-color: red;
width: 100%;
position: relative;
overflow: auto;
}<div class="wrapper">
<div class="green-bar"></div>
<div class="content">
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</div>
</div>