Создание многоколоночного контейнера inline-block для соответствия ширине содержимого

Question

Я пытаюсь создать горизонтальную компоновку фиксированных высот, элементов встроенного блока, содержащих в ней столбцы CSS.

article { 
    -webkit-column-width: 200px; 
    -moz-column-width: 200px; 
    column-width: 200px; 
    -webkit-column-gap: 1em; 
    -moz-column-gap: 1em; 
    column-gap: 1em; 
    -moz-column-fill: auto; 
    column-fill: auto; 
    height: 350px; 
    display: inline-block; 
} 

Проблема заключается в том, что ширина инлайн-блочных элементов неправильной установки (столбцы занимают меньше/больше места, чем контейнер обеспечивает) - кажется, что ширина соответствует содержанию, прежде чем он превращается в столбцы (в Chrome - в контейнерах результатов находятся друг над другом) или подходит для одного столбца (в Firefox и IE - в контейнерах результатов перекрываются).

Пример (проверьте ширину элемента статьи): http://codepen.io/anon/pen/yNQdVE

Единственное решение, которое я придумал, чтобы сделать контейнер подходит один столбец и использовать JS, чтобы установить ширину с шириной полосы прокрутки. Кажется, что он работает нормально во всех трех браузерах, которые я тестировал.

Пример: http://codepen.io/anon/pen/gpQNWg

Есть ли чистый CSS решение этой проблемы?

Answer 1

Изменение отображения от inline-block до table-cell, кажется, дает вам желаемые результаты.

В этом ручке этот стиль применяется вместе с границами для визуального обеспечения.

http://codepen.io/TheLarkInn/pen/jPQjzK

Представляется, что, хотя это встроенный блок элемент, что браузер принимает второй столбец растягивает ширину окна просмотра, несмотря на ширину 300 пикселей на колонку.

Вы также можете обернуть все предметы в элемент, используя также display: flex;.