两个具有动态内容的垂直块

Question

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

• 两个垂直块.
• 每个块都尽可能地增加其内容.
• 高度总和永远不会超过块容器的100%.
• 每个区块都有权获得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>