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

时间：2017-07-07 10:49:49

标签： css css3 sass flexbox overflow

我有一个非常简单的使用flexbox的网格，我想在可滚动的框中显示多行数据。我可能会错过一个琐碎的属性，但行高似乎没有正确调整到它的内容的高度。

示例：https://plnkr.co/edit/rCXfvd4Vsh8RgoFja89A?p=preview

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

enter image description here

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

编辑：已解决！

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案:

答案 0 :(得分：3)

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

因此，只需将flex-shrink更改为0即可阻止此操作。

另外，flex: 1会导致默认设置发生另一次更改，其中flex-basis设置为0，这会使项目共享剩余的空间，而不是默认auto 1}}，在计算剩余空间之前考虑其内容。

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

相关问题
最新问题