无法使overflow-x在全宽flexbox列中工作[重复]

Question

我正在尝试使用flexbox创建一个2列布局。一个在侧面固定宽度，另一个（主列）填充剩余空间。

它一直在工作，直到我把一些内容放在比屏幕宽的overflow-x： scroll父文件中。现在，这种广泛的内容不受其滚动母体的限制。

以下是示例：

.container {
  display: flex;
}
.container .col-main {
  background: gold;
  flex: 1 1 100%;
}
.container .col-side {
  background: cornflowerblue;
  flex: 0 0 15em;
}

.slider-container {
  overflow-x: scroll;
}
.slider-container .slider {
  background: repeating-linear-gradient(45deg, darkseagreen, darkseagreen 10px, dimgray 10px, dimgray 20px);
  width: 150em;
  height: 10em;
}

<div class="container">
  <div class="col-main">

    <div class=slider-container>
      <div class="slider">
        Foo
      </div>
    </div>

  </div>
  <div class="col-side">
    Side
  </div>
</div>

Answer 1

您可以添加宽度： 0到容器中。

css lang-css prettyprint-override">.container {
  display: flex;
}

.container .col-main {
  background: gold;
  flex: 1 1 100%;
  width: 0;
}

.container .col-side {
  background: cornflowerblue;
  flex: 0 0 15em;
}

.slider-container {
  overflow-x: scroll;
}

.slider-container .slider {
  background: repeating-linear-gradient(45deg, darkseagreen, darkseagreen 10px, dimgray 10px, dimgray 20px);
  width: 150em;
  height: 10em;
}

<div class="container">
  <div class="col-main">

    <div class=slider-container>
      <div class="slider">
        Foo
      </div>
    </div>

  </div>
  <div class="col-side">
    Side
  </div>
</div>

Answer 2

尝试添加minwidth:0 到弹性项。

.container .col-main {
  ...
  min-width: 0;
}

JSFIDLE

4.5。Flex项的隐含最小大小

为了为弹性物品提供更合理的默认最小尺寸，本规范引入了一个新的auto值作为CSS 2.1中定义的min width和min height属性的初始值。[CSS21]