How to make the .content element marked in the code comment have the height of its parent?

 .parent { width: 100px; height: 300px; border: 1px solid; display: flex; flex-direction: column; align-items: stretch; } .child { width: 100%; border: 1px solid tomato; } .child:nth-child(1)>.content, .child:nth-child(3)>.content { width: 100%; height: 120px; } .child:nth-child(2) { flex-grow: 1; } 
 <div class="parent"> <div class="child"> <div class="content"></div> </div> <div class="child"> <!-- у элемента ниже .content должна появится высота --> <div class="content"></div> </div> <div class="child"> <div class="content"></div> </div> </div>

  • heigth:100%; Not? - Dmytryk
  • @ Dmytryk Nah ... - user220409

1 answer 1

Stretch it with flex

 .parent { width: 100px; height: 300px; border: 1px solid; display: flex; flex-direction: column; align-items: stretch; } .child { width: 100%; border: 1px solid tomato; } .child:nth-child(1)>.content, .child:nth-child(3)>.content { width: 100%; height: 120px; } .child:nth-child(2) { flex-grow: 1; display:flex; } .child:nth-child(2) .content{ flex: 1 1 auto; background:repeating-linear-gradient(45deg,black,white 5px) } 
 <div class="parent"> <div class="child"> <div class="content"></div> </div> <div class="child"> <!-- у элемента ниже .content должна появится высота --> <div class="content"></div> </div> <div class="child"> <div class="content"></div> </div> </div>

  • Thank you. It's the most. - user220409