I have a flex div that contains 2 elements. I want the 2 elements to be the parent height when their content should be auto height, but I always get the inner content height.
my code:
<html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> html, body { height: 100%; margin: 0px; } .parent { background: gray; display:flex; align-items: center; } .child { height: 100%; background: blue; border: 1px solid white; } </style> </head> <body> <div class="parent"> <div class="child"> <div> <div>abc</div> <div>abc</div> </div> </div> <div class="child"> <div>abc</div> </div> </div> </body> </html>
Instead of height: 100%, try align-self: stretch on the child class.
height: 100%
align-self: stretch
child
2.1m questions
2.1m answers
60 comments
56.9k users
