在高度上增加彈性列但保持寬度固定

Question

我有兩列分別占據頁面寬度的 70% 和 30%。 我希望它們隨着更多元素的添加而垂直增長（並且也垂直包裝）。

但是我無法使用flex使其表現得像下面那樣。 如果一列增長，而另一列保持不變，則增長的列壓倒較小的列並將其推入另一行。

有什么建議嗎？

 .column { display: flex; padding: 10px; } .left_column { flex: 1 1 70%; } .right_column { flex: 1 1 30%; }

 <div class="row"> <div class="column left_column" style="background-color:#aaa;"> <div> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> </div> </div> <div class="column right_column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> </div>

Answer 1

當我理解正確時，這應該對您有所幫助。

 body{ margin:0; } .row{ display:flex; } .left_column{ width:70vw; } .right_column{ width:30vw; }

 <div class="row"> <div class="column left_column" style="background-color:#aaa;"> <div> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> <button class="button b1"></button> </div> </div> <div class="column right_column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div>

Answer 2

首先，你的 CSS 應該是

`.row {
  display: flex;
  padding: 10px; 
}

.left_column {
  flex: 1 1 70%;
}

.right_column {
  flex: 1 1 30%;
}`

因為您的外部容器是“行”類。 之后，您還可以將“display: flex”添加到列（這里的 left_column 和 right_column 類。）。 我推薦閱讀CSSTricks 的這個實用的flexbox 指南。