Two vertical blocks with dynamic content

Question

Finding a clean CSS solution to achieve the following scenario:

• Two vertical blocks.
• Each block grows with its content as much as possible.
• The sum of heights can never exceed 100% of the container blocks.
• Each block is entitled to 50% of the vertical space, but may occupy unused space from the other.

Consider the following example:

Panel 1. Blocks A and B are tall enough to fit their content.

Panel 2: As Block A adds more content, it is allowed to grow as much as possible without clicking on Block B along the edge. Block B is tall enough to match its contents. As soon as the sum of the heights of blocks A and B reaches 100%, block A starts scrolling.

Panel 3: now block B adds content and returns part of the space borrowed by block A. Block A is still scrolling. Block B does not scroll and is tall enough to fit its contents.

Panel 4: When block B reaches 50% of the total height, both blocks A and B scroll.

Answer 1

You can use flex and other properties to fulfill your request.

Here is what you could do. This may require some settings depending on your content and its size. But this can be a good starting point for solving only CSS.

.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 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 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 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 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 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 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 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 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 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 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 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 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 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 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>