在高度上增加弹性列但保持宽度固定

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 指南。