CSS Columns layout does not work on Firefox - css

Question

I was trying to create a layout with 5 columns,
the height should be stretch by its content,
so i cannot set a fixed height for it,
but it doesn't work in my codepen work
https://codepen.io/yyywork/pen/MWGLJwN
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>

Answer 1

Try to use below CSS its working perfectly on Chrome and Mozilla Firefox.
#inner-container {
display: flex;
flex-direction: row;
align-items: stretch;
}
.item {
flex-basis: calc(100% / 5);
border:1px solid #000;
}
<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>