html布局 子元素的高度不会影响父元素的高度

<div style="data-height: 100px;position: relative;background-color: #f0ad4e">
    <div style="data-height: 100%;background-color: orange"></div>
    <div style="data-height: 100%;background-color: red"></div>
</div>

父元素高度: 父元素的高度设置为 100px。
子元素高度: 子元素的 data-height: 100% 是相对于其父元素的高度的，因此每个子元素的高度都是 100px。
为什么没有撑开或裁剪
固定高度: 父元素的高度是固定的 100px。子元素的 data-height: 100% 只是意味着它们的高度与父元素的高度相同。子元素不会改变父元素的高度。
布局行为: 在标准流布局中，子元素的高度不会影响父元素的高度，除非父元素的高度是由内容撑开的。例如，如果父元素的高度没有被明确设置为固定值（比如 data-height: auto），子元素的内容会影响父元素的高度。但在你的情况下，父元素高度被明确设置为 100px，子元素的高度设置为 100% 只是填满了父元素的高度，并不会改变父元素的实际高度。
子元素溢出: 子元素的 data-height: 100% 使它们的高度等于父元素的高度，而这两个子元素的高度总和超过了父元素的高度，这会导致子元素超出父元素的边界，形成滚动条或重叠的现象。父元素的高度仍然是 100px，不论子元素的内容如何。
解决方法
如果你希望父元素的高度能够根据子元素自动调整，可以去掉 height 属性或使用 min-height 来确保父元素至少有足够的高度容纳子元素。