Make Inline-block With Columns To Have Right Width

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

Solution 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>