CSS full height not working in a scroll box

user_14195152 0
Viewed 43

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>

css html javascript
2 Answers

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>

user_116196470

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>

user_155786270
Related