Как можно расположить горизонтальные колонки с фиксированным заголовков перед каждым текстовом блоком? Количество текстовых блоков, как и количество текста в нём заранее неизвестно. Высота и ширина контейнера фиксирована. Скроллинг только горизонтальный
Использую CSS свойства Columns и display: inline-block.
Хочу распооложить как на этом скриншоте: Чтобы, если места для текста не хватает, он переносился на следующую колонку, а следующий за ним текст подвинулся.
Но получается, что следующий блок текста не знает, о том, что предыдущий растянулся на 2 колонки, и накладывается прямо поверх текста.
Пример jsFiddle
p {
margin: 0;
}
.container {
outline: 1px dotted gray;
height: 200px;
width: 400px;
white-space: nowrap;
overflow-x: auto;
}
.column {
outline: 1px dotted green;
display: inline-block;
vertical-align: top;
white-space: normal;
column-width: 100vw;
width: min-content;
min-width: 50%;
height: 100%;
}
.header {
column-span: all;
white-space: nowrap;
}
<div class="container">
<div class="column">
<h2 class="header">Lorem ipsum dolor sit..</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, dicta aut a at sunt quasi aspernatur. Ullam porro, consequatur est quo voluptatum atque. Delectus, dicta, saepe? Delectus sapiente officiis soluta maiores voluptatum voluptates culpa. Libero consectetur aliquid temporibus, dignissimos</p>
</div>
<div class="column">
<h2 class="header">Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p>
</div>
<div class="column">
<h2 class="header">Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div class="column">
<h2 class="header">Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
Есть какие-нибудь идеи?