Horizontal CSS columns with fixed header - html

Question

How can I arrange horizontal columns with fixed top header on each text block?
Text blocks overlaps each other on overflow.
I want to see like on this screenshot
You can see the problem at jsFiddle
or this:
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>
Or what does another way exist?

Answer 1

https://jsfiddle.net/1x22mtkt/1/
Check this out. You can adjust the min-height according to your need. my suggestion would be to set it to what your largest column would be so that each column would be of same size.
p {
margin: 0;
}
.container {
outline: 1px dotted gray;
width: 400px;
white-space: nowrap;
overflow-x: auto;
}
.column {
outline: 1px dotted gray;
min-height:230px;
display: inline-block;
vertical-align: top;
white-space: normal;
column-width: 100vw;
width: min-content;
min-width: 60%;
height: 100%;
}
.column p{
word-break: break-all;
}
.header {
column-span: all;
white-space: nowrap;
}