'CSS: Why doesn't my "Flex item" get a 100% height inside an absolute positioned div?

I have the following markup and css:

<div class="container">
 <div class="textContainer">
  <div class="textWrapper">
  <div class="itemOne">
  Item one
  </div>
  <div class="itemTwo">
   Item two
  </div>
  </div>
 </div>
</div>

.container {
 position: relative;
 height: 500px; 
}

.textContainer {
    position: absolute;
    top: ${theme.spaces.large};
    bottom: ${theme.spaces.large};
    left: ${theme.spaces.large};
    width: 350px;
    z-index: 2;
}

.textWrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

Why is the '100%' on the text-wrapper not applied?

htmlcsscss-position


Solution 1:[1]

I believe this is because .textContainer needs to be given a static height value. height only works for elements that have a parent with a static height (in pixels or other units).

Solution 2:[2]

Set the height of the text container so the text wrappers will take 100% height of it.

.container {
  position: relative;
  height: 500px;
  width:700px;
}

.textContainer {
  position: absolute;
  width: 350px;
  z-index: 2;
}

.textContainer.left{
  background-color:red;
}
.textContainer.right{
  background-color:gray;
  right:0;
  height:100%;
}


.textWrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
<div class="container">
  <div class="textContainer left">
    <div class="textWrapper">
      <div class="itemOne">
        Item one
      </div>
      <div class="itemTwo">
        Item two
      </div>
    </div>
  </div>
    
  <div class="textContainer right">
    <div class="textWrapper">
      <div class="itemThree">
        Item three
      </div>
      <div class="itemFour">
        Item four
      </div>
    </div>
  </div>
</div>

Solution 3:[3]

according to MDN the height property have not inheritance. so you should set height for .textWrapper parent too

.container {
 position: relative;
 height: 500px;
 border: 1px solid;
}

.textContainer {
    position: absolute;
    width: 350px;
    z-index: 2;
    height: 100%;
}

.textWrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background: gold;
}
<div class="container">
 <div class="textContainer">
  <div class="textWrapper">
  <div class="itemOne">
  Item one
  </div>
  <div class="itemTwo">
   Item two
  </div>
  </div>
 </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 JeanRemyDuboc
Solution 2 Cédric
Solution 3 Ahmad MRF

Related Questions