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

时间：2016-02-01 01:12:36

标签： html css css3 flexbox

我在嵌套列中有一些内容，其父级是嵌套的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>

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

这似乎只有在Flex容器嵌套并且内容的宽度是固定的情况下才会发生。如何防止面板被推开？

1 个答案:

答案 0 :(得分：2)

更新了答案

这个问题的原始答案是不必要的复杂。

简单的事实是，弹性项目默认为min-width: auto。这意味着它们不能缩小到低于其内容的大小。

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

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

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

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

错误报告：

相关问题
最新问题