css – 滚动包含溢出内容的flexbox

Here’s the code我正在使用实现上面的布局:

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;
}

我省略了用于样式的代码。你可以在the pen看到它。

以上工作,但是当内容区域的内容溢出时,它使整个页面滚动。我只想要内容区域本身滚动,所以I added overflow: auto to the content div

现在的问题是,列本身不会超出其父级高度,因此边框也被截断了。

Here’s the pen showing the scrolling issue

如何设置内容区域以单独滚动,同时仍然有其子扩展超出内容框的高度?

我已经谈到Tab Atkins(flexbox规范的作者)关于这一点,这是我们想出了:

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;
}

这里是笔:

> Short columns being stretched
> Longer columns overflowing and scrolling

这是因为align-items:stretch不会收缩它的项目,如果他们有一个固有的高度,这是由min内容完成。

http://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css – 滚动包含溢出内容的flexbox