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>

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

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

有没有办法如何使用flexbox完成此操作？

我的代码存在的问题是，overflow: auto如果我没有指定second子网格的宽度，则1800px永远不会有效，整个布局的宽度为second。另一方面，我无法指定它，因为r'((?:AB|AC))\s*:\s*(\w+)\s*\/\s*([\w.]+)\s*(;\s*\d+)'孩子应该占据剩余的空间。

谢谢！

Answer 1

在这种情况下，现有标记不变，主要原因是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>将解决此问题。

Stack snippet

＆＃13;

display: flex

＆＃13;

IE，有点儿错误，还需要second添加<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>的风格，而且这里不需要IE css hack，因为这适用于其他浏览器也是。

Stack snippet

＆＃13;

second

＆＃13;

最后，当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>。

Stack snippet

＆＃13;

<build>
  <plugin>
     <groupId>org.apache.maven.plugins</groupId>
     <artifactId>maven-deploy-plugin</artifactId>
     <version>2.4</version>
     <configuration>
       <skip>true</skip>
     </configuration>
  </plugin>
...
</build>

＆＃13;

Answer 2

也许你想要这样的东西

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid;
  height:100px;
}

#first {
  flex: 1 1 200px;
  border: 1px solid green;
}

#second {
  flex: 1;
  min-width:200px; /* this is not mandatory but to simply show the result in the snippet, you may go full width an remove it*/
  overflow-x: scroll;
  overflow-y: hidden;
}

#third {
  flex: 1 1 600px;
  border: 1px solid red;
}

＆＃13;

<div class="container">

  <div id="first">...</div>

  <div id="second">
      <div style="min-width: 1000px;height:100%;">
      </div>
  </div>

  <div id="third">...</div>

</div>

＆＃13;

Answer 3

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>

CSS flex布局和溢出：自动子

3 个答案: