logo标签列表

使用flexbox布局的滚动超出内容

csslayoutmultiple-columnsflexbox
347

这里输入图片描述

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

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

我省略了用于样式的代码，您可以在这个笔记本中看到所有内容。

上述方法可行，但当content区域的内容溢出时，整个页面都会滚动。我只想让内容区域本身滚动，因此我将overflow: auto添加到content div中。

现在问题是列本身不会延伸超过其父元素的高度，所以边框也被切断了。

这里是展示滚动问题的笔记本。

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

13个回答
405

我已经与Tab Atkins（flexbox规范的作者）进行了交谈，我们得出了以下结论：

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

.box {
    display: flex;
    min-height: min-content; /* needs vendor prefixes */
}
<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>

这里有一些笔：

  1. 短列被拉伸。
  2. 较长的列溢出并滚动。

这个方法有效的原因是因为 align-items: stretch 不会缩小具有内在高度的项目，这里通过使用 min-content 来实现。

3
当父元素的高度不取决于其子元素时，它们通常可以起作用，本例恰好是这种情况。min-height: 100%确实可以解决Firefox中列短时拉伸的问题（但在Chrome中不行）。不确定这是Chrome的bug还是Firefox的bug。 - dholbert
4
请注意，Firefox 目前仅支持“min-content”用于宽度值，而不支持用于高度值-- 因此，如果这对您很重要，这在 Firefox 中将无法正常工作。 (参见例如 https://bugzilla.mozilla.org/show_bug.cgi?id=852367 ) - dholbert
2
@dholbert - 这些笔的问题在于它们是公共的，所以任何人都可以更改它们。我已经拥有它们了，所以在这里给你：http://codepen.io/JosephSilber/pen/pmyHh - Joseph Silber
5
是的，在IE11中出现了故障。 - Steve
1
但是可能也指向下面的 https://dev59.com/Y2Ei5IYBdhLWcg3wMp9y#35609992 是一个很好的主意，因为这是一个适用于所有这些情况的可靠解决方案（尽管如果有人知道它为什么有效，例如“这是CSS / Flex规范的哪些部分导致这是真实的”解释，那么整个SO和更广泛的Web开发世界仍将受益 =） - Mike 'Pomax' Kamermans
显示剩余13条评论
227
30
这在我的情况下也有效，但是哇，我真的很想看到为什么它起作用的解释。大多数时候，我发现 CSS 规范对于这种事情完全难以理解。 - markrian
5
从您的博客文章中：「我不知道为什么它有效，而规格也没有提到任何东西。」因此，我正在寻找为什么它有效的解释。我已经浏览了规格，但正如您所说，那里没有什么引人注目的地方。 - markrian
4
经过进一步思考，我认为这是有道理的。默认行为是让每个 div 扩展以包含其所有子元素，因此不会在叶节点处出现任何需要隐藏的溢出内容。你需要从 DOM 的顶部强制使用 overflow:hidden，这样直到达到想要溢出和滚动的节点之前，没有父级可以容纳其子元素。 - geon
4
我不确定那是否真正解释清楚了。据我所知，在元素上将溢出设置为隐藏并不能阻止它扩展以包含其所有子元素。根据MDN的说法：“overflow属性指定在内容溢出其块状容器时是剪切内容、呈现滚动条还是仅显示内容。” 此外，将overflow设置为除visible之外的任何其他值会创建一个新的块级格式化上下文——但这可能并不相关，因为flex容器已经创建了自己的块级格式化上下文: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context。 - markrian
5
我在这里找到了技术原因链接，然后在官方CSS规范网站上找到了更详细的解释。基本上，改变溢出属性会改变最小自适应高度的值。试着将overflow: hidden替换为overflow: auto或者min-height: 0。所有的都应该仍然能够正常工作，但是后者被认为是首选（至少在我阅读规范之后是这样理解的）。 - Noxware
显示剩余5条评论
111

如何同时使用position: absolute;和flex布局：

在需要定位的 flex 项目上添加 position: relative，然后在该项目内部添加另一个带有以下样式的<div>元素：

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

这将元素延伸到其相对定位父元素的边界，但不允许其超出范围。在内部，overflow: auto; 将按预期工作。

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

最终结果：显示flex布局的最终结果图片

CodePen链接

3
如果组件内部设置了填充，那么此解决方案特别有用，因为它可以将其锁定在所需位置上。这种方式更加简单。（是的，你也可以设置 box-sizing: border-box，但对于某些第三方控件来说可能更加复杂）。 - Simon_Weaver
15
下面这些加粗的 CSS 更改（以及一堆用于测试滚动的列内容）将有效。 它使每个内容列都可以单独滚动，这可能比最初请求的更好吧。 无论如何，请在此 Pen中查看结果。
.content { flex: 1; display: flex; height: 1px; } .column { padding: 20px; border-right: 1px solid #999; overflow: auto; }
这里的诀窍似乎是可滚动面板需要在某个地方（在本例中通过其父级）直接设置一个 height，而不仅仅是由 flexbox 确定。 因此，即使是 height: 1px 也能工作。 flex-grow:1 仍会正确调整面板的大小。
有趣的是，它与 height: 0px 一起使用也能正常工作。当使用嵌套布局等情况时，这个方法非常有用。其他解决方案很大程度上依赖于 vh、vw 或绝对定位。 - Artur Bodera
14

我没有看到这个答案。但是我需要的诀窍是确保这些项目具有 flex-shrink: 0；否则它们会被挤压。

.container {
  display: flex;
  overflow: auto
}

.container > * {
  flex-shrink: 0;
  width: 10em;
  height: 10em;
  background: linear-gradient(to bottom right, #F0F, #0FF);
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

非常感谢。我有一个布局，所有的 flex 容器都使用 min-height: 0，以允许子元素可滚动。这导致一些东西缩小和重叠，但是你的 .container > * 解决了这个问题。 - Dull Bananas
我认为你的示例有效是因为你设置了高度：height: 10em; - Bogdan U
13
4
在使用"height: 100vh"时，你需要非常小心，因为在iOS Safari和Android中它的测量方式不同。其中一个考虑到了URL栏的高度，而另一个则没有。 - Sean Anderson
只有当你想要滚动的内容占据整个屏幕高度时，这才有效。如果你添加了一个标题div，你又回到了原点。 - Liam
谢谢你这个技巧，非常有效！ - bgrand-ch
10
添加以下内容：
align-items: flex-start;

对于.content {}规则的修改，至少在Firefox和Chrome中可以解决问题。

默认情况下，.content具有align-items：stretch属性，使得它调整所有自动高度子元素的大小以匹配其自身的高度，根据http://dev.w3.org/csswg/css-flexbox/#algo-stretch的描述。相比之下，flex-start的值允许子元素计算自己的高度，并将其自己与其起始边缘对齐（并溢出并触发滚动条）。

1
显然。但是当它们的固有高度较短时，它们不会延伸到父元素的高度。 - Joseph Silber
1
此外，列的高度将不再相等，这是 flexbox 的主要吸引力之一。 - Joseph Silber
好的。我之前并没有明确知道那是一个设计约束——抱歉。 - dholbert
5
这个问题的解决方案是给 .content 添加 overflow: auto; 属性，使内容包裹器可以滚动。
此外，在使用 Flexbox 包装器和类似于这样的 overflowed 可滚动内容时，会出现其他情况，如此代码片段所示。
解决方案是在大内容周围设置一个具有 overflow: auto; 属性的父级包装器，并添加 overflow: hidden（或auto）;。
5

我遇到的一个问题是，要有滚动条，元素需要指定高度（不能使用百分比）。

解决方法是在每个列中嵌套另一组div，并将列的父元素显示设置为flex，并使用flex-direction: column。

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

这里是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/

2

我试过上面很多的答案，但都没有什么效果。我怀疑这些答案大部分已经过时或者不符合我的要求。我问题的答案来自于一个相关问题:

Flex项的自动最小尺寸

您遇到了flexbox的默认设置。

沿着主轴方向，flex项的大小不能小于其内容的大小。

因此，阻止我的flex盒子项目滚动的原因就是元素的大小会根据内容自动调整为auto，然后进行调整而不是滚动。这里有一个完全工作的现代示例（使用Tailwind）:

<!DOCTYPE html>
<html class="h-full">
    <head>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="h-full">
        <div class="h-full flex flex-col items-stretch">
            <div class="bg-white border-b border-gray-400">
              <h1>
                Header
              </h1>
            </div>
            <div class="flex flex-row flex-auto min-h-0">
                <div class="flex flex-col bg-red-600 items-stretch min-h-0" style="flex: 0 0 25%;">
                    <div class="flex-initial min-h-0 overflow-x-hidden overflow-y-auto">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat libero id elementum iaculis. Vestibulum at mauris mauris. Donec blandit nibh rhoncus mollis mattis. Aenean gravida ex sagittis semper aliquet. Suspendisse a dolor enim. Fusce sagittis lectus et eleifend imperdiet. Curabitur iaculis pellentesque rutrum. Fusce et gravida eros. Nam vestibulum pharetra lorem, sed semper leo fermentum nec.</p>
                        
                        <p>Curabitur varius feugiat maximus. Morbi dolor urna, consectetur ac nisl eget, varius pretium sem. Curabitur aliquam, lectus ut viverra consequat, dolor ligula gravida ex, nec dictum felis mi in enim. Curabitur luctus ligula diam, sed varius orci vehicula a. Ut vehicula imperdiet tempor. Morbi eget sollicitudin mi. Etiam condimentum sem arcu, non dignissim mi ultricies ut. Fusce faucibus sem nec laoreet facilisis. Nullam ut lorem vitae odio gravida rhoncus. Etiam ut orci vitae odio interdum consequat.</p>
                        
                        <p>Sed felis dui, fermentum ac libero ut, faucibus mattis urna. Morbi at est lobortis, lobortis diam nec, rhoncus augue. Sed at turpis malesuada nulla accumsan accumsan. Mauris pharetra, odio at elementum pharetra, lacus magna luctus sem, sit amet pretium lorem lectus sed libero. Curabitur ullamcorper turpis nunc, a eleifend urna venenatis ac. Vivamus consectetur, nunc quis facilisis vehicula, risus ligula finibus arcu, at vulputate ex dui lobortis dolor. Maecenas tincidunt, lacus et vehicula pulvinar, enim sem venenatis nisi, nec fringilla eros felis quis mauris. Duis luctus eu risus condimentum rutrum. Suspendisse interdum at velit eget mattis. Integer quis porta nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc iaculis, lacus ut dignissim imperdiet, enim enim malesuada quam, id pretium justo neque id ipsum. Vestibulum nec nisl mattis, mattis est sed, venenatis lectus. Quisque sed magna nec purus viverra rhoncus dapibus sed sapien. Quisque id fermentum risus, non vestibulum justo. Donec ultrices enim quis eros porttitor, non posuere tortor viverra.</p>
                        
                        <p>Phasellus leo ipsum, tristique nec tristique sit amet, molestie eget urna. Aenean suscipit eget ante in vulputate. Morbi tincidunt velit quis lorem gravida, ac scelerisque massa aliquet. Aliquam sem lacus, bibendum ut elit at, mollis dapibus ligula. Suspendisse potenti. Fusce neque est, lobortis a augue a, pretium fermentum turpis. Etiam molestie et odio non rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus condimentum cursus metus eu hendrerit. Vestibulum ultrices, leo eget consectetur tempus, nisi diam maximus orci, sit amet ultricies leo mauris vitae eros.</p>
                        
                        <p>Aenean eleifend pretium libero ut venenatis. Quisque maximus nulla eget arcu maximus, id rhoncus lectus lobortis. Nullam at ullamcorper nisi. Aliquam erat volutpat. Curabitur efficitur ante in fermentum euismod. Donec id arcu finibus, finibus mauris id, tempor nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lobortis feugiat ligula, id aliquet elit placerat ut. In ac mi elementum, varius urna a, condimentum urna. Sed luctus massa nulla, quis elementum sapien lacinia eu. Vestibulum risus leo, rutrum ac finibus in, iaculis at ligula. Nullam hendrerit mattis eleifend. Sed egestas lectus eu vulputate malesuada.</p>
                    </div>
                </div>
                    
                <div class="flex flex-col items-stretch min-h-0 flex-auto">
                    <div class="flex-initial min-h-0 overflow-x-hidden overflow-y-auto">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat libero id elementum iaculis. Vestibulum at mauris mauris. Donec blandit nibh rhoncus mollis mattis. Aenean gravida ex sagittis semper aliquet. Suspendisse a dolor enim. Fusce sagittis lectus et eleifend imperdiet. Curabitur iaculis pellentesque rutrum. Fusce et gravida eros. Nam vestibulum pharetra lorem, sed semper leo fermentum nec.</p>
                        
                        <p>Curabitur varius feugiat maximus. Morbi dolor urna, consectetur ac nisl eget, varius pretium sem. Curabitur aliquam, lectus ut viverra consequat, dolor ligula gravida ex, nec dictum felis mi in enim. Curabitur luctus ligula diam, sed varius orci vehicula a. Ut vehicula imperdiet tempor. Morbi eget sollicitudin mi. Etiam condimentum sem arcu, non dignissim mi ultricies ut. Fusce faucibus sem nec laoreet facilisis. Nullam ut lorem vitae odio gravida rhoncus. Etiam ut orci vitae odio interdum consequat.</p>
                        
                        <p>Sed felis dui, fermentum ac libero ut, faucibus mattis urna. Morbi at est lobortis, lobortis diam nec, rhoncus augue. Sed at turpis malesuada nulla accumsan accumsan. Mauris pharetra, odio at elementum pharetra, lacus magna luctus sem, sit amet pretium lorem lectus sed libero. Curabitur ullamcorper turpis nunc, a eleifend urna venenatis ac. Vivamus consectetur, nunc quis facilisis vehicula, risus ligula finibus arcu, at vulputate ex dui lobortis dolor. Maecenas tincidunt, lacus et vehicula pulvinar, enim sem venenatis nisi, nec fringilla eros felis quis mauris. Duis luctus eu risus condimentum rutrum. Suspendisse interdum at velit eget mattis. Integer quis porta nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc iaculis, lacus ut dignissim imperdiet, enim enim malesuada quam, id pretium justo neque id ipsum. Vestibulum nec nisl mattis, mattis est sed, venenatis lectus. Quisque sed magna nec purus viverra rhoncus dapibus sed sapien. Quisque id fermentum risus, non vestibulum justo. Donec ultrices enim quis eros porttitor, non posuere tortor viverra.</p>
                        
                        <p>Phasellus leo ipsum, tristique nec tristique sit amet, molestie eget urna. Aenean suscipit eget ante in vulputate. Morbi tincidunt velit quis lorem gravida, ac scelerisque massa aliquet. Aliquam sem lacus, bibendum ut elit at, mollis dapibus ligula. Suspendisse potenti. Fusce neque est, lobortis a augue a, pretium fermentum turpis. Etiam molestie et odio non rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus condimentum cursus metus eu hendrerit. Vestibulum ultrices, leo eget consectetur tempus, nisi diam maximus orci, sit amet ultricies leo mauris vitae eros.</p>
                        
                        <p>Aenean eleifend pretium libero ut venenatis. Quisque maximus nulla eget arcu maximus, id rhoncus lectus lobortis. Nullam at ullamcorper nisi. Aliquam erat volutpat. Curabitur efficitur ante in fermentum euismod. Donec id arcu finibus, finibus mauris id, tempor nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lobortis feugiat ligula, id aliquet elit placerat ut. In ac mi elementum, varius urna a, condimentum urna. Sed luctus massa nulla, quis elementum sapien lacinia eu. Vestibulum risus leo, rutrum ac finibus in, iaculis at ligula. Nullam hendrerit mattis eleifend. Sed egestas lectus eu vulputate malesuada.</p>

                    </div>
                </div>
            </div>
          </div>
    </body>
</html>

这在Chrome（100）中的渲染效果如下： 在此输入图片描述

所以如果我理解正确的话，为父容器指定一个固定的高度是必需的？我在flex_parent -> flex-container -> flex-item中有一些嵌套，对我有效的方法是在flex_parent中添加一个height:arbitrary value，然后在flex_container中添加flex:1; overflow_y:auto; - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接