flexbox嵌套窗格仅包含父卷轴

时间:2017-04-20 09:30:41

标签: css flexbox

我正在尝试一个示例示例,我希望在父窗格上有一个滚动条,即使子窗格的内容更多。在我写的例子中,我需要在div上有一个滚动条,ID为#34; khaki"尽管它的每个孩子都有一个单独的滚动条,其中包含id" child1"和" child2"。

任何人都可以试着帮助我实现这个目标

谢谢&问候 sivakiran 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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

要弄清楚你想要达到的目标有点困难,但要点是你需要设置高度,如果你想要元素有滚动条。没有有限的高度,元素将伸展以适应内容。

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