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内容完成。

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

解决方法

猜你在找的CSS相关文章