css - 仅具有父滚动的 flexbox 嵌套 Pane

标签 css flexbox

我正在尝试处理一个示例示例,即使子 Pane 的内容更多,我也希望在父 Pane 上有一个滚动条。在我写的示例中,我需要在 ID 为“khaki”的 div 上有一个滚动条,尽管它的每个子 div 的 ID 为“child1”和“child2”都有一个单独的滚动条。

任何人都可以尝试帮助我实现这一点

感谢和问候 西瓦基兰B

这是代码。

<html>

<head>
  <style type="text/css">
    #main {
      width: 100%;
      height: 100%;
      border: 1px solid #c3c3c3;
      display: flex;
      flex-direction: column;
    }
    
    #main div {
      flex-grow: 1;
      overflow: auto;
      min-height: 50px;
      /* this value has been kept here such that even though the content is very less than this the pane will have some heigth other wise due to flex-grow these panes will not enough space because of which scrolling is coming automatically even for small content. Please remove this and check the output once so that we can see the difference */
    }
    
    body {
      overflow: hidden;
    }
    
    #khaki {
      display: flex;
      flex-direction: column;
      border: 2px dotted black;
    }
    
    #child1 {
      border: 1px solid red;
      background-color: grey;
    }
    
    #child2 {
      border: 1px solid green;
      background-color: violet;
    }
  </style>
</head>

<body>
  <div id="main">
    <div id="coral" style="background-color:coral;">white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color
      white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite</div>
    <div id="lightblue" style="background-color: lightblue; flex-grow:0;" id="myBlueDiv">Hiiiiiiiiiii</div>
    <div id="khaki" style="background-color:khaki;flex-grow:2;">
      This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background
      color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This
      should get background color as khakhiii This should get background color as khakhiii

      <div id="child1">
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
        1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
        1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
        1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
        1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
        1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
        1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of
        khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
        1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki
      </div>
      <div id="child2">
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
        khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
        khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
        khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
      </div>
    </div>
    <div id="pink" style="background-color:pink;">pink</div>
    <div id="grey" style="background-color:lightgrey;">light grey</div>
  </div>
  <script type="text/javascript">
    (function() {
      console.log(document.querySelector("body").clientHeight);
    })();
  </script>
</body>

</html>

最佳答案

弄清楚您要实现的目标有点困难,但要点是如果您希望元素具有滚动条,则需要设置高度。如果没有限制高度,元素将拉伸(stretch)以容纳内容。

<html>

<head>
  <style type="text/css">
    #main {
      width: 100%;
      height: 100%;
      border: 1px solid #c3c3c3;
      display: flex;
      flex-direction: column;
    }
    
    div {
      flex-grow: 1;
      overflow: auto;
      min-height: 50px;
      /* this value has been kept here such that even though the content is very less than this the pane will have some heigth other wise due to flex-grow these panes will not enough space because of which scrolling is coming automatically even for small content. Please remove this and check the output once so that we can see the difference */
    }
    
    body {
      overflow: hidden;
    }
    
    #khaki {
      display: flex;
      flex-direction: column;
      border: 2px dotted black;
      height: 200px;
    }
    
    #child1 {
      border: 1px solid red;
      background-color: grey;
      height: 200px;
    }
    
    #child2 {
      border: 1px solid green;
      background-color: violet;
      height: 200px;
    }
  </style>
</head>

<body>
  <div id="main">
    <div id="coral" style="background-color:coral;">white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color
      white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite color white color white color white colorwhite colorwhite colorwhite colorwhite
      colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite colorwhite</div>
    <div id="lightblue" style="background-color: lightblue; flex-grow:0;" id="myBlueDiv">Hiiiiiiiiiii</div>
    <div id="khaki" style="background-color:khaki;flex-grow:2;">
      This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background
      color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This should get background color as khakhiii This
      should get background color as khakhiii This should get background color as khakhiii

      <div id="child1">
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
        1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
        1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
        1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
        1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild
        1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
        1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of
        khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child
        1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki
        child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki child 1
        of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khaki child 1 of khakichild 1 of khakichild 1 of khaki child 1 of khaki child 1 of khaki
        child 1 of khaki
      </div>
      <div id="child2">
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
        khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
        khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of
        khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
        child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child
        2 of khaki child 2 of khakichild 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki child 2 of khaki
      </div>
    </div>
    <div id="pink" style="background-color:pink;">pink</div>
    <div id="grey" style="background-color:lightgrey;">light grey</div>
  </div>
  <script type="text/javascript">
    (function() {
      console.log(document.querySelector("body").clientHeight);
    })();
  </script>
</body>

</html>

关于css - 仅具有父滚动的 flexbox 嵌套 Pane ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43515592/

相关文章:

javascript - 如何通过 getComputedStyle 获取 flexbox 的精确宽度?

html - Flexbox 高度约束 100% 的可用空间

css - Safari 包装中的 Flexbox 无法按预期工作

css - Border Radius 仅在 IE 中有效,在其他浏览器中无效

html - 尝试使用 HTML/CSS 隐藏列时出现问题

html - 使元素均匀地填充给定空间

html - 在浏览器调整大小时,大图像不会缩小到 css 网格容器

java - 如何让我的幻灯片自动播放?

html - 我使用 nav 标签的菜单不适合整个页面,只占屏幕的一半

css - 提供产品信息的弹出窗口