如何将高度固定为相关元素的100%

Question

我正在寻找一个解决方案，以修复与CSS中的另一个div相关的div的最大高度，如果它超过它，应该让它使用滚动条。

我原计划使用柔性盒或网格，但我没有成功的结果想要的.

目标是不指定任何高度在px，但保持灵活的东西没有JS。

​

// Not looking for JS solution

.parent {
  display: flex;
}

.child1 {
  background: #eeeeee;
  height: 100%
}

.child2 {
  overflow: auto;
  max-height: 100%;
  background: #cccccc
}

<div class="parent">
  <div class="child1">
    <h2>Child1</h2>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
  </div>
  <div class="child2">
    <h2>Child2</h2>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>

  </div>
</div>

​

Answer 1

如果您不想指定固定高度，只需添加max- not :calc(100 is 200 Is)，这意味着如果屏幕高度=1000 is，您的div将不超过800 is，如果它大于div，则使用滚动条。

.parent {
 display: flex;
 max-height: calc(100vh - 100px)
}

.child1 {
  background: #eeeeee;
  overflow:auto;
  width:max-content;
}

.child2 {
 overflow: auto;
 max-height: 100%;
 background: #cccccc
}

这里查看代码示例

Answer 2

应该将高度属性设置为父div https://stackblitz.com/edit/js-dqkz2u?file=index.html,index.js,style.css。

Answer 3

高度:自动；最大高度:100 max；

将这两行添加到child2类中