Zwei vertikale Blöcke mit dynamischem Inhalt

Question

für eine reine CSS-Lösung Suchen Sie das folgende Szenario zu erreichen:

• Zwei vertikale Blöcke.
• Jeder Block wächst mit seinem Inhalt so viel wie möglich.
• Die Summe der Höhen darf nie größer als 100% des Containerblocks sein.
• Jeder Block hat das Recht auf 50% des vertikalen Raums, kann aber ungenutzten Platz aus dem anderen ausleihen.

Betrachten Sie das folgende Beispiel:

Panel 1. Die Blöcke A und B nur groß genug sind, ihren Inhalt zu passen.

Panel 2: Da Block A mehr Inhalt hinzufügt, darf er so viel wie möglich wachsen, ohne Block B über die Kante zu schieben. Block B ist gerade groß genug, um zu seinem Inhalt zu passen. Sobald die Summe der Höhen der Blöcke A und B 100% erreicht, beginnt Block A mit dem Scrollen.

Panel 3: Jetzt fügt Block B Inhalt hinzu und nimmt etwas von dem von Block A entliehenen Speicherplatz zurück. Block A scrollt weiter. Block B scrollt nicht und ist gerade groß genug, um zu seinem Inhalt zu passen.

Panel 4: Sobald Block B 50% der Gesamthöhe erreicht, scrollen beide Blöcke A und B.

Answer 1

Sie können Flex und seine anderen Eigenschaften verwenden, um Ihre Anfrage zu erfüllen.

Hier ist, was Sie tun könnten. Abhängig von Ihrem Inhalt und seiner Größe können einige Anpassungen erforderlich sein. Aber dies könnte ein guter Ausgangspunkt für eine CSS-Lösung sein.

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-basis: 25%; 
 
    height: 600px; 
 
    border: 1px solid red; 
 
} 
 
.column { 
 
    flex: 1 1; 
 
    width: 25%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-basis: auto; 
 
    margin: 1px; 
 
} 
 
.class-a, 
 
.class-b { 
 
    background-color: cyan; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
} 
 
.column:nth-child(3) .class-a { 
 
    flex: 1 1 50%; 
 
} 
 
.column:nth-child(3) .class-b { 
 
    flex: 0 0 auto; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <div class="class-a"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
 
    </div> 
 
    <div class="class-b">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    </div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="class-a"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown 
 
     printer took a galley of type and scrambled it to make a type specimen book. It 
 
    </div> 
 
    <div class="class-b"> 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    </div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="class-a"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown 
 
     printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing 
 
     and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also 
 
     the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
 
     took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    </div> 
 
    <div class="class-b">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
 
    </div> 
 
    </div> 
 
    <div class="column"> 
 
    <div class="class-a">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum 
 
     is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived 
 
     not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    </div> 
 
    <div class="class-b">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text 
 
     ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum 
 
     is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived 
 
     not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    </div> 
 
    </div> 
 

 
</div>