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

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 类。）。我推荐阅读这篇实用的flexbox guide by CSSTricks。