I attempted to design a layout with 5 columns where the height adjusts based on its content, so I couldn't set a fixed height. However, my codepen project isn't functioning as expected. Visit this link to view it.
body {
height: 100%;
}
#outer-container {
display: flex;
flex-direction: row;
height: 100%;
}
#inner-container {
flex-grow: 1;
column-count: 5;
height: 100%;
}
.item {
break-inside: avoid;
height: 100%;
}<div id="outer-container">
<div id="inner-container">
<div class="item item-1">
<b>Col 1</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
<div class="item item-2">
<b>Col 2</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-3">
<b>Col 3</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-4">
<b>Col 4</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-5">
<b>Col 5</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
</div>
</div>