Question

我的代码在Chrome和Safari中运行良好，但似乎无法在 IE Edge 和 Firefox 中工作（不是在IE11中，但是那些＆＃39; s问题）。

如果我不在this post中使用subheader和nested-content，那么它会在这些浏览器中正确呈现它。但这决定了我的组件需要如何构建，我希望避免这种情况。

通过为Firefox和Edge做更多的事情，这种方式是否可行？或者我是否需要重新考虑嵌套？

编辑：我的情况是这样的：在容器级别，我知道最大高度（它是动态计算并在＆＃34; Popover＆＃34;组件中设置）。但是我不能在孩子们中设置任何特定的最大高度，因为他们只是＆＃34;内容＆＃34; Popover。而且我不希望整个.container溢出，而只是列表nested-content。

＆＃13;

.container {
  display: flex;
  max-height: 140px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: lightgray;
}
.subheader {
  background: lightblue;
}
.content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;  
}
.content > div {
  flex: 0 1 auto;
}
.nested-content {
  overflow: auto;
}

＆＃13;

<div class="container">
  <div class="header">Header without specific height. Always stays at top of .container, even if it is so long it uses up two lines.</div>
  <div class="content">
    <div class="subheader">Subheader without specific height.</div>
    <div class="nested-content">
      <div>Item no 1 in long list</div>
      <div>Item no 2 in long list</div>
      <div>Item no 3 in long list</div>
      <div>Item no 4 in long list</div>
      <div>Item no 5 in long list</div>
      <div>Item no 6 in long list</div>
      <div>Item no 7 in long list</div>
      <div>Item no 8 in long list</div>
      <div>Item no 9 in long list</div>
      <div>Item no 10 in long list</div>
      <div>Item no 11 in long list</div>
      <div>Item no 12 in long list</div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

看看这个plunker是否适合您的情况 https://plnkr.co/edit/12N6yofXXeUoTrG6tUuZ?p=preview

.container {
  display: flex;
  max-height: 140px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: lightgray;
}
.subheader {
  background: lightblue;
}

.content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;  
  overflow:auto;
}
.content > div {
  flex: 0 1 auto;
}
.nested-content {
  overflow: auto;

}

Answer 2

似乎它是Firefox中的一个错误，显然也是Edge中的错误。

请参阅Stackoverflow上已公开的解决方案：＆＃34; firefox overflow-y not working with nested flexbox＆＃34;

使用flexbox时，溢出属性在IE Edge和Firefox中不起作用

2 个答案: