Question

我是日本工程师，英语不好，对不起。

我想使“ .main-content”滚动。

我做到了。

它正常工作。

但是我有一个问题。

为什么我必须将height: 0;设置为“ .body”类。

这是我的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style type="text/css">
    * {
      margin: 0;
      box-sizing: border-box;
    }
    body {
      width: 100vw;
      height: 100vh;
      padding: 32px;
      overflow: hidden;
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }
    .heading {
      background-color: cornflowerblue;
    }
    .body {
      display: flex;
      flex-grow: 1;
      height: 0;
    }
    .left-nav {
      flex-basis: 200px;
      max-height: 300px;
      overflow-y: auto;
      background-color: lightblue;
    }
    .left-nav-item, .main-content-item {
      height: 80px;
      width: 80px;
      margin: 8px;
      background-color: lightgray;
    }
    .main-content {
      flex-grow: 1;
      overflow-y: auto;
      background-color: lightsteelblue;
    }
    .footing {
      background-color: lightseagreen;
    }
  </style>

</head>
<body>
  <div class="container">
    <div class="heading">
      heading
    </div>
    <div class="body">
      <div class="left-nav">
        <div class="left-nav-item">
          left-nav-item1
        </div>
        <div class="left-nav-item">
          left-nav-item2
        </div>
        <div class="left-nav-item">
          left-nav-item3
        </div>
        <div class="left-nav-item">
          left-nav-item4
        </div>
        <div class="left-nav-item">
          left-nav-item5
        </div>
        <div class="left-nav-item">
          left-nav-item6
        </div>
        <div class="left-nav-item">
          left-nav-item7
        </div>
        <div class="left-nav-item">
          left-nav-item8
        </div>
      </div>
      <div class="main-content">
        <div class="main-content-item">
          main-content-item1
        </div>
        <div class="main-content-item">
          main-content-item2
        </div>
        <div class="main-content-item">
          main-content-item3
        </div>
        <div class="main-content-item">
          main-content-item4
        </div>
        <div class="main-content-item">
          main-content-item5
        </div>
        <div class="main-content-item">
          main-content-item6
        </div>
        <div class="main-content-item">
          main-content-item7
        </div>
        <div class="main-content-item">
          main-content-item8
        </div>
      </div>
    </div>
    <div class="footing">
      footing
    </div>
  </div>
</body>
</html>

“。main-content”由“ .body”的默认值align-content: stretch垂直拉伸。

但是，如果“ .main-content”的内部溢出，则“ .main-content”的高度会变大。

而且overflow-y: auto;不起作用。

但是，如果我给{.1}}（0并不重要，除了auto以外还需要一些值。）给“ .body”类，“。main-content”会得到适当的高度并且可以滚动。

它现在可以正常工作，但是我想知道为什么我需要给height: 0;上“ .body”类。

Answer 1

欢迎堆栈溢出！

overflow属性指定如果内容发生该怎么办溢出元素的盒子

。

此属性指定在元素的内容太大而无法在指定区域中容纳时是剪切内容还是添加滚动条。

注意：overflow属性仅适用于带有指定的高度。

这是overflow的默认行为，如果您没有指定内容高度不会溢出的特定高度，那么应该超出该元素应该溢出的高度。

为了使溢出处理元素的内容，元素需要确定的度量，否则，元素容器将继续扩展以容纳尽可能多的内容元素是否具有内容大小，但如果容器元素具有设置的高度或上限高度（最大高度），一旦其内容达到这些限制，它将遵循溢出规则，在这种情况下滚动，它将隐藏任何应该超过高度的内容容器，它可以让我们通过拖动滚动条看到它酒吧。

有关详细说明的参考链接

www.w3schools.com

需要在父级中设置高度，以使拉伸内容的内部可滚动

1 个答案: