In a row of div elements styled with flexbox, the heights vary, but the tallest one dictates a uniform height for all. You can see an example in this JSFiddle:
https://i.sstatic.net/Lkqse.png
HTML:
<div>
<div class="big">
hello
</div>
<div>
bonjour
</div>
</div>
CSS:
div {
display: flex;
flex-direction: row;
border-color: gray;
border-style: solid;
border-width: 5px;
}
.big {
height: 100px;
}
The "hello" box is set to 100px in height, causing the "bonjour" box to inherit the same height, despite its smaller content.
Is there a way to have each box's height determined by its content, rather than being influenced by the largest div within the row of aligned boxes?