滚动包含溢出内容的flexbox [英] Scrolling a flexbox with overflowing content

问题描述

>

这是代码我使用实现上述布局：

Here's the code I'm using to achieve the above layout:

HTML ：

<div class="header">Main header</div>

<div class="body">

    <div class="sidebar">Sidebar</div>

    <div class="main">

        <div class="page-header">Page Header. Content columns are below.</div>

        <div class="content">

            <div class="column">Column 1</div>
            <div class="column">Column 1</div>
            <div class="column">Column 1</div>

        </div>
    </div>

</div>

CSS ：

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;

  display: flex;
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}

我省略了用于样式的代码。您可以在笔中查看所有内容。

I omitted the code used for styling. You can see all of it in the pen.

以上工作，但是当 content 区域的内容溢出时，会使整个页面滚动。我只希望内容区域本身滚动，因此我添加了 overflow：auto 到内容 div 。

The above works, but when the content area's content overflows, it makes the whole page scroll. I only want the content area itself to scroll, so I added overflow: auto to the content div.

现在的问题是，列

这是显示滚动问题的笔。

如何设置内容区域可以独立滚动，同时仍然有其子项延伸到内容框的高度之后？

How can I set the content area to scroll independently, while still having its children extend beyond the content box's height?

推荐答案

我说过 Tab Atkins （作者关于这一点，这是我们想出了：

I've spoken to Tab Atkins (author of the flexbox spec) about this, and this is what we came up with:

HTML：

<div class="content">
    <div class="box">
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
    </div>
</div>

CSS ：

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    min-height: min-content; /* needs vendor prefixes */
    display: flex;
}

以下是笔：

1. 短列被拉伸。


2. 较长的列溢出和滚动。

1. Short columns being stretched.
2. Longer columns overflowing and scrolling.

这样做的原因是因为 align-items：stretch 不会收缩其项目，如果它们具有内在高度，这是通过 min-content 。

The reason this works is because align-items: stretch doesn't shrink its items if they have an intrinsic height, which is accomplished here by min-content.

这篇关于滚动包含溢出内容的flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！