4

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:

Chrome screenshot

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.

Firefox screenshot

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:

Expected result

PS: Same question in russian.

1 Answer 1

1

In case if javascript is required, I have a simple solution that is suitable for fixed sizes of container. If sizes can dynamically change, recalculation is required (and it should reset inline styling first).

Works correctly in Chrome 51, FF 47, IE 11 and Opera 12.

var divs = document.querySelectorAll("div");

for (var q=0; q<divs.length; ++q) {
  //divs[q].style.width = ""; // Reset old value if refreshing
  divs[q].style.width = divs[q].scrollWidth + 'px';
}
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>

1
  • This is much better than my solution. I hadn't considered using scrollWidth.
    – Frank Tan
    Jul 27, 2016 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.