CSS 滚动内容溢出的 flexbox

Question

提问by Joseph Silber

enter image description here

在此处输入图片说明

Here's the codeI'm using to achieve the above layout:

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

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

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

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

我省略了用于样式的代码。你可以在笔中看到这一切。

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

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

The problem with this now is that the columns themselves don't extend beyond their parents height, so the borders are cut off there too.

现在的问题是列本身不会超出其父母的高度，因此边界也在那里被切断。

Here's the pen showing the scrolling issue.

这是显示滚动问题的笔。

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

如何将content区域设置为独立滚动，同时仍使其子项超出content框的高度？

Answer 1

回答by Joseph Silber

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

我已经和Tab Atkins（flexbox 规范的作者）谈过这个问题，这就是我们想出的：

HTML:

HTML：

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

CSS:

CSS：

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

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

Here are the pens:

以下是钢笔：

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

这样做的原因是因为align-items: stretch如果它们具有固有高度，则不会缩小其项目，这是由min-content.

Answer 2

回答by geon

I just solved this problem very elegantly after a lot of trial and error.

经过大量的反复试验，我刚刚非常优雅地解决了这个问题。

Check out my blog post: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

查看我的博客文章：http: //geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

Basically, to make a flexbox cell scrollable, you have to make all its parentsoverflow: hidden;, or it will just ignore your overflow settings and make the parent larger instead.

基本上，要使 flexbox 单元格可滚动，您必须使其所有的parentoverflow: hidden;，否则它只会忽略您的溢出设置，而是使 parent 更大。

Answer 3

回答by Akash

Working with `position:absolute;`along with `flex`:

与`position:absolute;`一起工作`flex`：

Position the flex item with position: relative. Then inside of it, add another <div>element with:

使用定位 flex 项目position: relative。然后在其中添加另一个<div>元素：

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

This extends the element to the boundaries of its relative-positioned parent, but does not allow to extend it. Inside, overflow: auto;will then work as expected.

这将元素扩展到其相对定位的父元素的边界，但不允许扩展它。在里面，overflow: auto;将按预期工作。

the code snippet included in the answer - Click on and then click on after running the snippet OR
Click herefor the CODEPEN
The result:

答案中包含的代码段 - 单击然后在运行代码段后单击或
单击此处获取CODEPEN
结果：

.all-0 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
p {
  text-align: justify;
}
.bottom-0 {
  bottom: 0;
}
.overflow-auto {
  overflow: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="p-5 w-100">
  <div class="row bg-dark m-0">
    <div class="col-sm-9 p-0 d-flex flex-wrap">
      <!-- LEFT-SIDE - ROW-1 -->
      <div class="row m-0 p-0">
        <!-- CARD 1 -->
        <div class="col-md-8 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/700x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 2 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
      </div>
      <div class="row m-0">
        <!-- CARD 3 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 4 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 5-->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3 p-0">
      <div class="bg-white m-2 p-2 position-absolute all-0 d-flex flex-column">
        <h4>Social Sidebar...</h4>
        <hr />
        <div class="d-flex overflow-auto">
          <p>
            Topping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream
            chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate
            bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva
        </div>
      </div>
    </div>
  </div>

Good Luck...

祝你好运...

Answer 4

回答by Doua Beri

A little late but this could help: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

有点晚了，但这可能会有所帮助：http: //webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

Basically you need to put html,bodyto height: 100%;and wrap all your content into a <div class="wrap">  </div>

基本上，你需要把html，body到height: 100%;和包装所有内容成<div class="wrap">  </div>

CSS:

CSS：

html, body {
  height: 100%;
}

.wrap {
  height: 100vh;
  display: flex;
}

Worked for me. Hope it helps

为我工作。希望能帮助到你

Answer 5

回答by dholbert

Add this:

添加这个：

align-items: flex-start;

to the rule for .content {}. That fixes it in your pen for me, at least (in both Firefox & Chrome).

的规则.content {}。至少（在 Firefox 和 Chrome 中），这对我来说在你的笔中修复了。

By default, .contenthas align-items: stretch, which makes it size all of its auto-height children to match its own height, per http://dev.w3.org/csswg/css-flexbox/#algo-stretch. In contrast, the value flex-startlets the children compute their own heights, and align themselves at its starting edge (and overflow, and trigger a scrollbar).

默认情况下，.contenthas align-items: stretch，根据http://dev.w3.org/csswg/css-flexbox/#algo-stretch，它使它的所有自动高度子项的大小与它自己的高度相匹配。相比之下，该值flex-start让孩子们计算自己的高度，并在其起始边缘对齐（并溢出，并触发滚动条）。

Answer 6

回答by Liam

One issue that I've come across is that to have a scrollbar a n element needs a height to be specified (and not as a %).

我遇到的一个问题是，要使用滚动条，元素需要指定高度（而不是 %）。

The trick is to nest another set of divs within each column, and set the column parent's display to flex with flex-direction: column.

诀窍是在每列中嵌套另一组 div，并使用 flex-direction: column 将列父项的显示设置为 flex。

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        overflow-y: hidden;
        overflow-x: hidden;
        color: white;
    }

    .base-container {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        align-items: stretch;
    }

    .title {
        flex: 0 0 50px;
        color: black;
    }

    .container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

        .container .header {
            flex: 0 0 50px;
            background-color: red;
        }

        .container .body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: row;
        }

            .container .body .left {
                display: flex;
                flex-direction: column;
                flex: 0 0 80px;
                background-color: blue;
            }
                .container .body .left .content,
                .container .body .main .content,
                .container .body .right .content {
                    flex: 1 1 auto;
                    overflow-y: auto;
                    height: 100px;
                }
                .container .body .main .content.noscrollbar {
                    overflow-y: hidden;
                }

            .container .body .main {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                background-color: green;
            }

            .container .body .right {
                display: flex;
                flex-direction: column;
                flex: 0 0 300px;
                background-color: yellow;
                color: black;
            }

    .test {
        margin: 5px 5px;
        border: 1px solid white;
        height: calc(100% - 10px);
    }
</style>

And here's the html:

这是 html：

<div class="base-container">
    <div class="title">
        Title
    </div>
    <div class="container">
        <div class="header">
            Header
        </div>
        <div class="body">
            <div class="left">
                <div class="content">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                        <li>21</li>
                        <li>22</li>
                        <li>23</li>
                        <li>24</li>
                    </ul>
                </div>
            </div>
            <div class="main">
                <div class="content noscrollbar">
                    <div class="test">Test</div>
                </div>
            </div>
            <div class="right">
                <div class="content">
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>End</div>
                </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/LiamFlavelle/czpjdfr4/

Answer 7

回答by Dognose

The solution for this problem is just to add overflow: auto;to the .content for making the content wrapper scrollable.

这个问题的解决方案只是添加overflow: auto;到 .content 以使内容包装器可滚动。

Furthermore, there are circumstances occurring along with Flexbox wrapper and overflowedscrollable content like this codepen.

此外，还有一些情况与 Flexbox 包装器和overflowed可滚动内容一起发生，例如codepen。

The solution is to add overflow: hidden (or auto);to the parent of the wrapper (set with overflow: auto;) around large contents.

解决方案是overflow: hidden (or auto);在大内容周围添加到包装器的父级（设置为溢出：自动；）。

CSS 滚动内容溢出的 flexbox

提问by Joseph Silber

回答by Joseph Silber

回答by geon

回答by Akash

Working with `position:absolute;`along with `flex`:

与`position:absolute;`一起工作`flex`：

回答by Doua Beri

回答by dholbert

回答by Liam

回答by Dognose

相关推荐

最近更新

标签

CSS 滚动内容溢出的 flexbox

提问by Joseph Silber

回答by Joseph Silber

回答by geon

回答by Akash

Working with position:absolute;along with flex:

与position:absolute;一起工作flex：

回答by Doua Beri

回答by dholbert

回答by Liam

回答by Dognose

相关推荐

CSS 在 Webkit 浏览器中错误计算的 SVG 高度

CSS 如何使用节点模块中的字体很棒的图标

CSS @font-face 在 IE8 中不起作用

CSS 为什么 inset box-shadow 不适用于图像？

相关推荐

最近更新

标签

Working with `position:absolute;`along with `flex`:

与`position:absolute;`一起工作`flex`：