CSS弹性布局和溢出: auto子

Question

我试图创建一个布局：

<div style="display: flex; flex-direction: row;">

    <div id="first" style="flex: 1 1 200px;">...</div>

    <div id="second" style="">
       <div style="overflow: auto">
           <div style="min-width: 1000px"></div>
       </div>
    </div>

    <div id="third" style="flex: 1 1 600px;">...</div>

</div>

如您所见，我需要一个具有固定大小的第一列和第三列的三列布局。第二列应该占据空间的其余部分。

问题是，在第二列中，我需要显示一个带有可选滚动条的大型数据表。

有没有办法用柔性盒来完成这个任务？

我的代码的问题是，如果我没有指定second子级的宽度，并且整个布局以1800px的宽度结束，那么second就永远无法工作。另一方面，我不能指定它，因为second子程序应该占用空间的其余部分。

谢谢!

Answer 1

在这种情况下，在现有标记未被触及的情况下，主要原因是min-width，对于flex项，它默认为auto，并防止它们(此处为second)小于其内容。

将min-width: 0;添加到其样式<div id="second" style="min-width: 0;">中将修复这一问题。

堆栈段

​

<div style="display: flex; flex-direction: row;">

    <div id="first" style="flex: 1 1 200px;">...</div>

    <div id="second" style="min-width: 0;">
       <div style="overflow: auto;">
           <div style="min-width: 1000px; background: red;"> scrollabe</div>
       </div>
    </div>

    <div id="third" style="flex: 1 1 600px;">...</div>

</div>

​

IE虽然有点错误，但也需要display: flex添加到second的样式中，其中一个在这里不需要IE黑客攻击，因为这在其他浏览器上也能使用。

堆栈段

​

<div style="display: flex; flex-direction: row;">

    <div id="first" style="flex: 1 1 200px;">...</div>

    <div id="second" style="display: flex; min-width: 0;">
       <div style="overflow: auto;">
           <div style="min-width: 1000px; background: red;"> scrollabe</div>
       </div>
    </div>

    <div id="third" style="flex: 1 1 600px;">...</div>

</div>

​

因此，最后，当second中的内容较小并且在这种情况下应该填满剩余的空间时，它也将需要flex-grow: 1。

堆栈段

​

<div style="display: flex; flex-direction: row;">

    <div id="first" style="flex: 1 1 200px;">...</div>

    <div id="second" style="flex-grow: 1; display: flex; min-width: 0;">
       <div style="overflow: auto;">
           <div style="min-width: 1000px; background: red;"> scrollabe</div>
       </div>
    </div>

    <div id="third" style="flex: 1 1 600px;">...</div>

</div>

​

Answer 2

​

div {
  border: 1px solid;
  min-height: 40px;
  min-width: 40px;
  padding: 8px;
  box-sizing: border-box;
}

#second>div>div {
  background-color: yellow;
}

<div style="display: flex; flex-direction: row;">
  <div id="first" style="flex-basis: 100px;">...</div>
  <div id="second" style="flex: 1;">
    <div style="overflow: auto">
      <div style="min-width: 100px"></div>
    </div>
  </div>
  <div id="third" style="flex-basis: 300px;">...</div>
</div>
<br>
<div style="display: flex; flex-direction: row;">
  <div id="first" style="flex-basis: 100px;">...</div>
  <div id="second" style="flex: 1;">
    <div style="overflow: auto">
      <div style="min-width: 200px"></div>
    </div>
  </div>
  <div id="third" style="flex-basis: 300px;">...</div>
</div>
<br>
<div style="display: flex; flex-direction: row;">
  <div id="first" style="flex-basis: 100px;">...</div>
  <div id="second" style="flex: 1;">
    <div style="overflow: auto">
      <div style="min-width: 1000px"></div>
    </div>
  </div>
  <div id="third" style="flex-basis: 300px;">...</div>
</div>

​