兩個垂直塊動態內容

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>