Question

我对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/

任何人都有任何想法为什么会发生这种情况？

Answer 1

我认为您的问题是，当您只是将容器设为弹性项目时，您正在使每个子项目成为弹性项目。将容器设置为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>

正在不扩展以包含Chrome中动态添加的后代

1 个答案: