html - 如何在嵌套的 flex 容器内创建具有固定宽度的水平滚动内容？

Question

我在嵌套列中有一些内容，其父级是嵌套 flex 容器:

body,
html,
.container {
  height: 100%;
}

body {
  color: #fff;
}

.container {
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: red;
}

.main {
  flex: 1;
  display: flex;
}

.content {
  flex: 1;
  background: blue;
}

.scroll {
  overflow-x: auto;
}

.overflowing {
  width: 1024px;
}

.panel {
  width: 100px;
  flex-shrink: 0;
  background: green;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="main">
    <div class="content">
      <div class="scroll">
        <div class="overflowing">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lorem blandit, aliquet augue in, egestas risus. Curabitur sit amet justo eget metus faucibus sodales. Vestibulum rhoncus vel libero id imperdiet. Quisque ante quam, tempus in metus a, aliquam sollicitudin tortor. Nam in sagittis nunc, et feugiat augue. Phasellus augue lacus, maximus et ipsum ac, placerat tincidunt risus. Curabitur velit diam, fermentum ac quam eget, ultricies elementum ipsum. Nullam justo dolor, consequat porttitor semper a, eleifend vitae ante. Phasellus egestas dolor sed erat dapibus, a scelerisque dui sagittis. Pellentesque eget venenatis nisi. Vestibulum neque nisl, cursus ut sagittis a, ultrices ac nunc. Etiam auctor nunc porta leo fermentum, a iaculis leo vestibulum. Donec lobortis, tellus a aliquet malesuada, ipsum elit sagittis lectus, sed mollis magna diam eu mauris. Vivamus semper nunc eget nunc lacinia pharetra.</div>
      </div>
    </div>
    <div class="panel"></div>
  </div>
</div>

内容必须是固定宽度的(无论出于何种原因)。在较窄的视口(viewport)(如上面预览中的视口(viewport))上，它比其容器宽，所以我希望它水平滚动。我认为这就像将它包裹在 <div> 中一样简单与 overflow-x: auto ，但由于某种原因，内容将右侧面板推离屏幕(如果您全屏查看结果，您可以看到该面板)。

这似乎仅在 flex 容器嵌套且内容宽度固定时才会发生。如何防止面板被推开？

Answer 1

更新答案

这个问题的原始答案过于复杂。

简单的事实是，Flex 元素默认为 min-width: auto。这意味着它们不能缩小到其内容的大小以下。

这就是水平滚动条不会在蓝色文本元素中呈现的原因。内容无法溢出，因为该元素始终会扩展以容纳其内容。

解决方案是用 min-width: 0 覆盖 min-width: auto。

.main {
   min-width: 0; /* NEW */
}

.content {
   min-width: 0; /* NEW */
}

jsFiddle demo

更多详细信息请参见:Why doesn't flex item shrink past content size?

---

原始答案

您在问题中描述的问题在 Chrome 47 或 IE11 中不存在。代码预览，无论是小屏还是全屏，都会显示所有三个面板和水平滚动。它可以满足您的要求。

然而，在 Firefox 和 Chrome 48 中，显然存在问题。没有水平滚动，并且右侧面板(绿色)在小预览中被推离屏幕。

这些是 Firefox 和 Chrome 48 中的错误。

修复方法如下:

• 要在 FF/Chrome 48 中的 Flexbox 中启用水平滚动条，请将 min-width: 0; 添加到滚动项的父级。
• (可选)要启用垂直滚动条，请添加 min-height: 0。

以上是跨浏览器的解决方案；它似乎对无错误的浏览器没有任何影响。因此，将 min-width: 0 和 min-height: 0 添加到您的生产代码中应该没问题。

body,
html,
.container {
  height: 100%;
}

body {
  color: #fff;
}

.container {
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: red;
}

.main {
  flex: 1;
  display: flex;
  min-width: 0;             /* NEW */
}

.content {
  flex: 1;
  background: blue;
  min-width: 0;             /* NEW */
}

.scroll {
  overflow-x: auto;
}

.overflowing {
  width: 1024px;
}

.panel {
  width: 100px;
  flex-shrink: 0;
  background: green;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="main">
    <div class="content">
      <div class="scroll">
        <div class="overflowing">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lorem blandit, aliquet augue in, egestas risus. Curabitur sit amet justo eget metus faucibus sodales. Vestibulum rhoncus vel libero id imperdiet. Quisque ante quam, tempus in metus a, aliquam sollicitudin tortor. Nam in sagittis nunc, et feugiat augue. Phasellus augue lacus, maximus et ipsum ac, placerat tincidunt risus. Curabitur velit diam, fermentum ac quam eget, ultricies elementum ipsum. Nullam justo dolor, consequat porttitor semper a, eleifend vitae ante. Phasellus egestas dolor sed erat dapibus, a scelerisque dui sagittis. Pellentesque eget venenatis nisi. Vestibulum neque nisl, cursus ut sagittis a, ultrices ac nunc. Etiam auctor nunc porta leo fermentum, a iaculis leo vestibulum. Donec lobortis, tellus a aliquet malesuada, ipsum elit sagittis lectus, sed mollis magna diam eu mauris. Vivamus semper nunc eget nunc lacinia pharetra.</div>
      </div>
    </div>
    <div class="panel"></div>
  </div>
</div>

错误报告:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
• https://github.com/angular/material/issues/6841
• https://code.google.com/p/chromium/issues/detail?id=580196