滚动带有溢出内容的Flexbox

Question

Here's the code我正在使用以实现上述布局：

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

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

---

上述方法有效，但当content区域的内容溢出时，会使整个页面滚动。我只希望内容区域本身滚动，所以I added overflow: auto to the content div。

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

Here's the pen showing the scrolling issue

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

Answer 1

我已经与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;
}

以下是笔：

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

这样做的原因是align-items: stretch如果它们具有固有高度，则不会缩小其项目，这可以通过min-content完成。

Answer 2

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

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

基本上，要使flexbox单元格可滚动，您必须创建所有父级 overflow: hidden;，否则它将忽略您的溢出设置并使父级更大。

Answer 3

使用position:absolute;以及flex：

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

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

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

• 答案中包含的代码段 - 点击，然后在运行代码 或
后点击
• 点击here
的CODEPEN
• 结果：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

祝你好运......

Answer 4

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

基本上您需要将html，body添加到height: 100%;并将所有内容包装到<div class="wrap"> <!-- content --> </div>

CSS：

html, body {
  height: 100%;
}

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

为我工作。希望它有所帮助

Answer 5

添加：

align-items: flex-start;

到.content {}的规则。至少（在Firefox和Chrome浏览器中），这对我来说都是你的笔。

默认情况下，.content有align-items: stretch，这会使其所有自动高度子项的大小与每个http://dev.w3.org/csswg/css-flexbox/#algo-stretch的高度相匹配。相反，值flex-start允许孩子计算他们自己的高度，并在起始边缘对齐（并且溢出，并触发滚动条）。

Answer 6

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

此外，Flexbox包装器和codepen之类的overflowed可滚动内容也会发生情况。

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

Answer 7

以下粗体的 CSS 更改（加上列中的一堆内容以测试滚动）将起作用。好吧，它使每个内容列都可以单独滚动，这可能比最初请求的更多（更好？）。无论如何，请在 this Pen 中查看结果。

<块引用>

.content { flex: 1;显示：弹性； 高度：1px; }

.column { 填充：20px;右边框：1px 实心 #999； 溢出： 自动; }

这里的技巧似乎是可滚动面板需要在某处（在这种情况下，通过其父级）字面上设置 height，不是仅由 flexbox 确定。所以即使 height: 1px 也能工作。 flex-grow:1 仍会调整面板大小以使其适合。

Answer 8

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

诀窍是在每列内嵌套另一组div，并将列父级的显示设置为使用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/

Answer 9

.list-wrap {
  width: 355px;
  height: 100%;
  position: relative;

  .list {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    width: 100%;
  }
}

Answer 10

您可以简单地将溢出属性设置为“自动”

     .contain{
          background-color: #999999;
          margin: 5px; 
          padding: 10px 5px;
          width: 20%;
          height: 20%;
          overflow: auto;
      }              
       

contain 是我的 flex-item 类名之一

结果：

scroll bar seen properly

Answer 11

您可以在position: absolute内使用position: relative

https://codepen.io/Iquixe/pen/RwRzGrM

Answer 12

2020年的答案...您需要做的是以下粗体更改（在列中添加一堆内容以测试滚动）：

.content {flex： 1 0自动;显示：flex; 高度：1em； }

.column {padding：20px;右边框：1px实线＃999; 溢出： 自动； }

越野车的秘密似乎是，可滚动面板需要在字面上设置height（在本例中是通过其父级设置），不是仅由flexbox确定。因此，诀窍是设置一个任意的height，并让flex-grow:1覆盖以正确调整其大小。单独使用flex-grow可以使列的大小看起来不错，但是在没有设置height属性的情况下也不会触发滚动-即使该height属性最终不会影响高度。疯！ （Buggy。）此外，我还必须通过快捷方式flex-basis:auto显式设置flex:1 0 auto。 （至少在Firefox中是这样。否则默认情况下默认为“ 0％”，这会使列增长到完整的内容高度，从而消除了列中的滚动，从而使它滚动了整个页面。）