CSS 弹性布局和溢出：自动 child

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>

如您所见，我需要一个三列布局，第一列和第三列 大小固定。 第二列 应占据 其余 space。

问题是在第二列里面我需要显示一个大数据table和可选的滚动条。

有什么方法可以使用 flexbox 来实现吗？

我的代码的问题是，如果我没有指定 second child 的宽度并且整个布局的宽度最终为 1800px，那么 overflow: auto 永远不会工作].另一方面，我无法指定它，因为 second child 应该占据 space.

的其余部分

谢谢！

Answer 1

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>

Answer 2

在这种情况下，现有标记保持不变，主要原因是 min-width，弹性项目默认为 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 css hack，因为这适用于其他浏览器也是。

堆栈片段

<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中的内容较小，在这种情况下应该填充剩余的space，它也需要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>

CSS 弹性布局和溢出：自动 child

CSS flex layout and overflow: auto child

html

css

flexbox

angular5