简单的 flexbox 网格溢出适合行高

Question

我有一个使用 flexbox 的非常简单的网格，我想在可滚动框中显示多行数据。我可能遗漏了一个微不足道的属性，但行高似乎无法正确调整到其内容的高度。

一个例子：https://plnkr.co/edit/rCXfvd4Vsh8RgoFja89A?p=preview

.grid {
  display: flex;
  flex-flow: column;
  max-height: 400px;
  overflow-y: auto;
}

.grid .header {
  font-weight: 700;
  margin-bottom: 6px;
  border-bottom: 3px solid black;
}

.grid .row {
  flex: 1;
  display: flex;
  flex-flow: row;
}

.grid .row:nth-child(even) {
  background: #CCC;
}

.grid .col-1 {
  flex: 0 0 60px;
}

.grid .col-2 {
  flex: 1 0 200px;
  white-space: pre;
}

<h1>Flexbox grid</h1>

<h3>Overflow example</h3>

<div class="grid">
  <div class="row header">
    <div class="col-1">Col 1</div>
    <div class="col-2">Col 2</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">One Line</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">One Line</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
</div>

<h3>No overflow example</h3>

<div class="grid">
  <div class="row header">
    <div class="col-1">Col 1</div>
    <div class="col-2">Col 2</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
</div>

为了保持一切简单，我的列是固定大小的，我想要显示的所有数据都加载到网格中（而不是使用虚拟网格）。有没有办法修复我的示例，以便行根据内容自行调整？

编辑：已解决！

正如用户@bhv 指出的那样，我应该通过应用flex: 1 0 auto 而不是flex+:1 (1 auto) 来禁用.row 的收缩。

.grid {
  display: flex;
  flex-flow: column;
  max-height: 400px;
  overflow-y: auto;
}

.grid .header {
  font-weight: 700;
  margin-bottom: 6px;
  border-bottom: 3px solid black;
}

.grid .row {
  flex: 1;
  display: flex;
  flex-flow: row;
  flex-shrink: 0;
}

.grid .row:nth-child(even) {
  background: #CCC;
}

.grid .col-1 {
  flex: 0 0 60px;
}

.grid .col-2 {
  flex: 1 0 200px;
  white-space: pre;
}

<h1>Flexbox grid</h1>

<h3>Overflow example</h3>

<div class="grid">
  <div class="row header">
    <div class="col-1">Col 1</div>
    <div class="col-2">Col 2</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">One Line</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">One Line</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
</div>

<h3>No overflow example</h3>

<div class="grid">
  <div class="row header">
    <div class="col-1">Col 1</div>
    <div class="col-2">Col 2</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
  <div class="row body">
    <div class="col-1">DATA</div>
    <div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
  </div>
</div>

https://plnkr.co/edit/jIoaME?p=preview

Answer 1

由于您的项目的总高度高于其父项max-height，并且由于flex-shrink 默认为1，因此它们将尽可能缩小以适应。

因此，只需将 flex-shrink 更改为 0 即可防止这种情况发生。

另外flex: 1 会导致另一个默认值更改，其中flex-basis 设置为0，这将使项目平均共享剩余空间，而不是默认的auto，后者会获取它们的内容在计算剩余空间之前考虑。

但是，在您的情况下，如果父级没有高度（和flex-direction: column），flex: 1 无效并且可以删除。