I have managed to achieve a sort of working solution using the CSS code below;
column-fill:auto; /* default behavior */
height:100px;
However, this approach does not support percentage (%) sizes. It requires a fixed pixel (px) size which is not feasible for me.
Update
Fortunately, I found this solution that supports relative sizes and performs well on the latest versions of Chrome, Internet Explorer, Firefox, and Safari.
By applying the padding-bottom trick, I was able to establish a relative height for the wrapper container;
.wrapper {
padding-bottom:10%; /* serving as a spacer - representing my relative height */
background-color:lightblue;
position:relative; /* stopping point for absolute coordinates */
}
By implementing this setup;
<h1>short test</h1>
<div class="wrapper">
<div class="content">
The quick brown fox jumps over the lazy dog.
</div>
</div>
I can then proceed with the following adjustments;
.content{
-webkit-column-count: 5;
-moz-column-count: 5;
-ms-column-count: 5;
-o-column-count: 5;
column-count: 5;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
-ms-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
column-fill:auto;
position:absolute;
top:0;
left:0;
height:100%; /* filling up the wrapper container */
width:100%;
background-color:lightgray;
}
The drawback here is that when there's excessive content, it will continue adding columns horizontally beyond the specified count of 5. It won't expand vertically, but in the broader context, this behavior seems logical.