我在使用 Chrome 时遇到了一个奇怪的问题，希望进行完整性检查。我有以下网页:
<html>
<head>
<style>
html {
height: 100%;
}
body {
min-height:100%;
outline: 5px solid orange;
}
#app-container, .uof-page, .timeline-container {
display: flex;
flex-flow: column;
flex: 1;
min-height: 100%;
}
</style>
</head>
<body>
<button id="btn">Click me to add tall element</button>
<div id="app-container">
<div class="uof-page">
<div class="timeline-container">
<div class="mdl-grid discussion-thread">
<div class="discussion-messages">
Some initial content
</div>
</div>
</div>
</div>
</div>
</body>
<script>
document.querySelector('#btn').addEventListener('click', function() {
var x = document.querySelector('.discussion-messages');
x.innerHTML += '<p style="height:2000px;outline:1px solid red;">Foo</p>';
});
</script>
</html>
当我在我的本地文件系统上运行它时，Chrome 不会在单击按钮时展开正文以容纳新的后代。
我尝试使用 jsfiddle 设置测试用例，但无法复制该行为。 https://jsfiddle.net/r0ya42g9/
有人想知道为什么会发生这种情况吗？
最佳答案
我认为您的问题是，当您只应该将容器设为 flex 元素时，您却将每个子元素设为 flex 元素。一旦将容器设置为 flex，所有子项都是 flex。示例代码在任何浏览器上都没有给我扩展的 div。下面的这个 CSS 似乎对我有用。
<html>
<head>
<style>
html {
height: 100%;
}
body {
min-height:100%;
outline: 5px solid orange;
}
#app-container {
display: flex;
flex-flow: column;
flex: 1;
min-height: 100%;
outline: 1px solid blue;
}
</style>
</head>
<body>
<button id="btn">Click me to add tall element</button>
<div id="app-container">
<div class="uof-page">
<div class="timeline-container">
<div class="mdl-grid discussion-thread">
<div class="discussion-messages">
Some initial content
</div>
</div>
</div>
</div>
</div>
</body>
<script>
document.querySelector('#btn').addEventListener('click', function() {
var x = document.querySelector('.discussion-messages');
x.innerHTML += '<p style="height:2000px;outline:1px solid red;">Foo</p>';
});
</script>
</html>
关于css - 正文未扩展以包含 Chrome 中动态添加的后代，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38254068/