I am struggling with a flex div that contains 2 elements. I want both elements to take up the full parent height while their content remains at auto height, but I keep getting the inner content height.
Here is 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"><br>
<div class="child"><br>
<div><br>
<div>abc</div><br>
<div>abc</div><br>
</div><br>
</div><br>
<div class="child"><br>
<div>abc</div><br>
</div><br>
</div><br>
</body><br>
</html><br>The second "child" div should also stretch to the parent height, while keeping its inner content at auto height. How can I achieve this?