flexbox 和 bootstrap3 列的溢出布局导致不希望的页面宽度增加答案

【问题标题】：Overflowing layout with flexbox and bootstrap3 columns causing undesired page width increaseflexbox 和 bootstrap3 列的溢出布局导致不希望的页面宽度增加
【发布时间】：2018-08-27 09:08:28
【问题描述】：

我有一个使用twitter-bootstrap-3 列和flexbox 的布局。

在高层次上，我试图实现的布局是这样的：

工具栏和其余内容紧挨着弯曲（虚线框是 flex 的子项）：

非工具栏部分（绿色、蓝色和黄色框）是一个 bootstrap3 行，包含三列（列是虚线框）。在大屏幕上，布局应该像图像（元+主要内容是col-md-7，次要#1是col-md-5，次要#2是col-md-12），但在小屏幕上默认为单独的行（所有col-sm-12 ):

最后，元内容和主要内容（绿色和蓝色框）彼此相邻（虚线框是 flex 的子项）：

棘手的部分是主要内容（蓝色部分）可以变得相当宽，并且必须水平滚动。我遇到的问题是，随着溢出的内容部分变大，它似乎人为地将屏幕推宽并逃脱了引导列的边界。

这是一个展示该问题的简化示例。（您可能需要单击“整页”链接才能看到溢出问题。）

有没有办法解决这个问题？

.flex {
  display: flex;
}

.flex-variable {
  flex: 1 1 auto;
  /*flex:1;*/
}

.w-100 {
  width: 100%;
}

.overflowable-h {
  overflow-x: auto;
}

div {
  border: 1px gray solid;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>
  <div class="container-fluid">

    <h1>overflowing content</h1>
    <div class="flex">
      <div>toolbar</div>

      <div class="flex-variable">
        <div class="row">
          <div class="col-md-7">
            <div class="flex">
              <div class="text-nowrap">
                <table>
                  <tr>
                    <td>metadata</td>
                    <td>metadata</td>
                  </tr>
                  <tr>
                    <td>metadata</td>
                    <td>metadata</td>
                  </tr>
                </table>
              </div>
              <div class="flex-variable w-100 text-nowrap overflowable-h">
                <table>
                  <tr>
                    <td>content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content-content</td>
                  </tr>
                  <tr>
                    <td>content-content-content-content-content-content-content-content-content</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <div>secondary-secondary-secondary-secondary-secondary-secondary</div>
          </div>
          <div class="col-md-12">secondary-secondary-secondary-secondary-secondary-secondary-secondary-secondary-secondary</div>
        </div>

      </div>
    </div>

    <h1>no overflowing content</h1>
    <div class="flex">
      <div>toolbar</div>

      <div class="flex-variable">
        <div class="row">
          <div class="col-md-7">
            <div class="flex">
              <div class="text-nowrap">
                <table>
                  <tr>
                    <td>metadata</td>
                    <td>metadata</td>
                  </tr>
                  <tr>
                    <td>metadata</td>
                    <td>metadata</td>
                  </tr>
                </table>
              </div>
              <div class="flex-variable w-100 text-nowrap overflowable-h">
                <table>
                  <tr>
                    <td>content-content</td>
                  </tr>
                  <tr>
                    <td>content-content-content</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <div>secondary-secondary-secondary-secondary-secondary-secondary</div>
          </div>
          <div class="col-md-12">secondary-secondary-secondary-secondary-secondary-secondary-secondary-secondary-secondary</div>
        </div>

      </div>
    </div>



  </div>
</body>

</html>

【问题讨论】：

所以如果内容是 col-md-7，secondary1 是 col-md-5，什么是 content-metadata 和工具栏？ Bootstrap 基于 12 列布局。
@JonathanChaplin 为了清晰起见，我添加了更多图片。

标签： twitter-bootstrap-3 flexbox html css layout twitter-bootstrap-3 flexbox

【解决方案1】：

如果我理解正确，试试这个：

添加和修改您的 css，如下所示：（工具栏可以具有任何固定宽度 px/rem/vw/percent，并且您的 flex-variable 应根据工具栏宽度计算可用宽度）

#toolbar{width:200px;}
.flex-variable {
  flex: 1 1 auto;
  width: calc(100% - 200px);
}

并将 id 添加到工具栏 div

<div id="toolbar">toolbar</div>

您可以通过多种方式实现此目的，但您的容器应该有一定的宽度以免溢出。

【讨论】：