html - CSS大小调整-限制子级到父级的尺寸

我正在尝试设计一个特定的页面，与下面的代码非常相似。 JS Fiddle。

#body {                   /* is actually absolute positioned  */
  width: 800px;
  height: 400px;
}

#parent {
  display: flex;
}

#child1 {
  flex: 1;
  overflow: auto;
  background-color: yellow;
}

#child2 {
  flex: 0 0 150px;
  background-color: green;
}

#big {
  width: 900px;
  height: 490px;
  background-color: white;
}

<div id="body">
  <div id="dummy">
    <!-- Other content here -->
    <div id="parent">
      <div id="child1">
        <div id="big"></div>
      </div>
      <div id="child2"></div>
    </div>
  </div>
</div>

我需要添加到页面上的元素中的最小CSS是什么，以使父div永远不会超出body div的尺寸。

最佳答案

将高度设置为100vh而不是100％，因为在高度情况下视口单位的工作效率要高于百分比。
重写flex代码，它将支持以下及其新版本：
IE 10，Safari 6，Firefox 20，Opera 12。

#body, #dummy, #parent {
  width: 100%;
  height: 100vh;
}

#body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}

#dummy {
  position: relative;
  float: left;
}

#parent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#child1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: auto;
  background-color: yellow;
}

#child2 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 150px;
          flex: 0 0 150px;
  background-color: green;
}

#big {
  width: 900px;
  height: 490px;
  background-color: white;
}

<div id="body">
  <div id="dummy">
    <div id="parent">
      <div id="child1">
        <div id="big"></div>
      </div>
      <div id="child2"></div>
    </div>
  </div>
</div>

关于html - CSS大小调整-限制子级到父级的尺寸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44491922/