如何使具有交叉轴溢流的flexbox具有相同的高度? [英] How to make flexbox with cross axis overflow have the same height?

问题描述

flex容器包含两列，第一列可以具有任何高度，因此我手动设置了容器的高度并设置了overflow: auto.

A flex container contains two columns, and the first column could be with any height, so I manually set the height of the container and set overflow: auto.

我期望的是右边的空div与左边的sss框具有相同的高度.它们的高度相同，但这是由于sss左侧框的高度缩小了(与容器100px相同的高度)

What I expected is the right empty div would have the same height as the left sss box. It's true they have the same height, however it's due to the shrinked height of the left sss box.(The same height as the container 100px)

.c {
  display: flex;
  width: 400px;
  height: 100px;
  overflow: auto;
  flex-wrap: nowrap;
}

.empty {
  background-color: red;
  border: 1px solid;
  flex: 1;
}

.sss {
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

我在左框中设置了margin-top: auto，现在高度恢复到正常(完全是sss的总和)，而空框的高度仍然保持不变.

I set margin-top: auto in the left box, now the height is back to normal (exactly the sum height of all sss) while the height of the empty box still remain the same.

.c {
  display: flex;
  width: 400px;
  height: 100px;
  overflow: auto;
  flex-wrap: nowrap;
}

.empty {
  background-color: red;
  border: 1px solid;
  flex: 1;
}

.sss {
  margin-bottom: auto;
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

然后我设置了flex-wrap: wrap并且它起作用了，但是我不想在宽度不够时将它们包装起来.

Then I set flex-wrap: wrap and it worked, however I don't want them to be wrapped when the width is not enough.

此外，我尝试将这两列包装在一个表中，结果与flex-nowrap相同.

Also, I tried to wrap these two columns in a table and the result is the same as flex-nowrap.

.c {
  display: flex;
  width: 400px;
  height: 100px;
  overflow: auto;
  flex-wrap: wrap;
}

.empty {
  background-color: red;
  border: 1px solid;
  flex: 1;
}

.sss {
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

推荐答案

改为使用CSS网格:

.c {
  display: grid;
  grid-template-columns:auto 1fr;
  width: 400px;
  height: 100px;
  overflow: auto;
}

.empty {
  background-color: red;
  border: 1px solid;
}

.sss {
  border: 1px solid;
}

<div class="c">
  <div class="sss">
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
    <p>sssss</p>
  </div>
  <div class="empty">
  </div>
</div>

这篇关于如何使具有交叉轴溢流的flexbox具有相同的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！