如何使具有交叉轴溢出的flexbox具有相同的高度？

Question

一个弹性容器包含两列，第一列可以是任意高度，所以我手动设置了容器的高度并设置了overflow: auto。

我所期望的是右侧的空 div 将与左侧的 sss 框具有相同的高度。确实它们具有相同的高度，但是这是由于左侧sss框的高度缩小了。（与容器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的总高度），而空盒子的高度仍然保持不变。

.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 并且它起作用了，但是我不希望它们在宽度不够时被包裹。

另外，我尝试将这两列包装在一个表中，结果与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>

Answer 1

改用 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>