无法使溢出-x 在全宽 flexbox 列中工作 [重复]答案

【问题标题】：Can't make overflow-x work in a full width flexbox column [duplicate]无法使溢出-x 在全宽 flexbox 列中工作 [重复]
【发布时间】：2017-08-31 07:10:28
【问题描述】：

我正在尝试使用 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>

应该是这样渲染的：

【问题讨论】：

将min-width: 0 添加到.col-main。

标签： css flexbox

【解决方案1】：

尝试将min-width: 0; 添加到弹性项目。

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

jsFiddle

4.5. Implied Minimum Size of Flex Items

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

【讨论】：

【解决方案2】：

您可以将width: 0 添加到容器中。

.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>

【讨论】：