如何使Flexbox容器占据父容器的全部高度并可滚动？

Question

body标记被设置为溢出:隐藏，这使得页面不可滚动。我有几个嵌套容器，它们占用了所有可用的空间。

HTML：

<div class="app">
  <div class="container-1">
    <div class="container-2">
      <div class="container-3">
        <div class="container-4">
          <div class="container-5">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

body {
  overflow: hidden;
}

p {
  padding: 30px 0;
  background: lightGray;
}

.app {
  display: flex;
  height: 100%;
}

.container-1 {
  position: relative;
  height: 100%;
  width: 100%;
}

.container-2 {
  display: flex;
  flex: 1 1 auto;
}

.container-3 {
  display: flex;
  flex: 1 1 auto;
}

.container-4 {
  display: flex;
  flex: 1 1 auto;
}

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

科德芬

现在我要容器-5是可滚动的。但是，只有当我为容器-5指定一个高度，比如高度:100 if时，它才能工作。相反，我希望容器-5占用父服务器中所有可用的空间，并且可以滚动。有什么办法可以做到吗？

Answer 1

我将简化您的代码，并使用CSS网格而不是柔性盒。

​

body {
  overflow: hidden;
  margin:0;
}

p {
  padding: 30px 0;
  background: lightGray;
}

.app {
  display: grid;  /* grid container */
  height: 100vh; /* height on the upper container */
}

.app * {
  display: inherit; /* cascading grid */
  min-height: 0; /* related question : https://stackoverflow.com/a/43312314/8620333 */
}

.container-5 {
  overflow: auto; /* scroll here */
}

<div class="app">
  <div class="container-1">
    <div class="container-2">
      <div class="container-3">
        <div class="container-4">
          <div class="container-5">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​

对于柔性箱，它将如下所示：

​

body {
  overflow: hidden;
  margin:0;
}

p {
  padding: 30px 0;
  background: lightGray;
}

.app {
  display: flex;  /* flex container */
  height: 100vh; /* height on the upper container */
}

.app * {
  display: inherit; /* cascading flex */
  flex-direction: column;
  flex: 1;
  min-height: 0; /* related question : https://stackoverflow.com/q/36247140/8620333 */
}

.container-5 {
  overflow: auto; /* scroll here */
}

<div class="app">
  <div class="container-1">
    <div class="container-2">
      <div class="container-3">
        <div class="container-4">
          <div class="container-5">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​