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

I have the following markup and css:

<div >
 <div >
  <div >
  <div >
  Item one
  </div>
  <div >
   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?

CodePudding user response：

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).

CodePudding user response：

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 >
  <div >
    <div >
      <div >
        Item one
      </div>
      <div >
        Item two
      </div>
    </div>
  </div>
    
  <div >
    <div >
      <div >
        Item three
      </div>
      <div >
        Item four
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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 >
 <div >
  <div >
  <div >
  Item one
  </div>
  <div >
   Item two
  </div>
  </div>
 </div>
</div>