两个包含动态内容的垂直块

Question

寻找纯CSS解决方案来实现以下场景：

• 两个垂直方块。
• 每个块都尽可能地增加其内容。
• 高度之和永远不会超过块的百分之百＆＃39;容器
• 每个区块都有权获得50％的垂直空间，但可以从另一个区域借用未使用的空间。

考虑以下示例：

面板1. A座和B座的高度足以适合其内容。

面板2：当块A添加更多内容时，允许它尽可能多地增长，而不会将块B推到边缘上。 B座的高度足以满足其内容。一旦块A和块B的高度之和达到100％，块A就开始滚动。

面板3：现在，块B添加内容，并收回块A借用的一些空间。块A仍在滚动。 B区不滚动，只是足够高，以适应其内容。

面板4：一旦方块B达到总高度的50％，方块A和B都会滚动。

Answer 1

您可以使用flex及其他属性来完成提问。

这是你能做的。根据您的内容和大小，可能需要进行一些调整。但这可能是仅限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'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>