Want to make inline-block
with horizonlal columns. I need each inline-block
to have width as minimal number of columns to fit content.
The problem is strange columns processing by browser.
div {
height: 10em;
border: 1px solid red;
display: inline-block;
vertical-align: top;
-moz-column-width: 10em;
column-width: 10em;
-moz-column-fill: auto;
column-fill: auto;
}
<div>
<p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
<p>Cum an autem affert laoreet, ea ius falli impedit ocurreret. No duo aperiam perfecto lobortis, ut mea aliquid graecis, te has facete sententiae. Ut singulis laboramus his, meis laoreet docendi ius ad. Duo nisl alterum perfecto no, eum in etiam laboramus prodesset, rebum nobis nusquam in sit. Usu at expetendis consectetuer.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, an nec posse homero accumsan.</p>
</div>
<div>
<p>Lorem ipsum</p>
</div>
Chrome, is likely determine width without columns and than puts columns into the area. First block has extra space for one column. Other blocks could have width of one column, but they all have different widths:
Firefox sets all blocks width to a single column and thext overflows it. I could force scrollbar on the element or any of its containers, but I can't make any of them have correct width.
I have a hack forsing Chrome to behave like Firefox, but it doesn't help me to solve the problem:
div {
height: 10em;
border: 1px solid red;
display: inline-block;
vertical-align: top;
-moz-column-width: 10em;
column-width: 10em;
-moz-column-fill: auto;
column-fill: auto;
/* chrome to firefox */
width: -webkit-min-content;
width: min-content;
min-width: 10em;
}
<div>
<p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
<p>Cum an autem affert laoreet, ea ius falli impedit ocurreret. No duo aperiam perfecto lobortis, ut mea aliquid graecis, te has facete sententiae. Ut singulis laboramus his, meis laoreet docendi ius ad. Duo nisl alterum perfecto no, eum in etiam laboramus prodesset, rebum nobis nusquam in sit. Usu at expetendis consectetuer.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, an nec posse homero accumsan. Pro sale deseruisse ad. Vix cu integre fuisset insolens. Quo perfecto pericula ex. Te nam tritani honestatis, eam integre virtute ut.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, an nec posse homero accumsan.</p>
</div>
<div>
<p>Lorem ipsum</p>
</div>
Actually I need to get something like this: