Horizontale CSS-Spalten mit fester Kopfzeile

Question

Wie kann ich horizontale Spalten mit fester Kopfzeile auf jedem Textblock anordnen? Textblöcke überlappen sich beim Überlauf.

Ich möchte auf diesem Screenshot sehen, wie

Sie sehen das Problem kann bei jsFiddle

oder dies:

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>

Oder was das andere tut Weg existiert?

Answer 1

https://jsfiddle.net/1x22mtkt/1/

Check this out. Sie können die min-Höhe nach Ihren Bedürfnissen anpassen. Mein Vorschlag wäre, es so zu setzen, wie es Ihrer größten Spalte entspricht, damit jede Spalte die gleiche Größe hat.

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; 
 
}