CSS full height not working in a scroll box-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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 >
    <div ></div>
    <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>
  </div>