我下面的代码在Chrome和Safari中可以正常工作,但在IE Edge和Firefox中似乎不起作用(也不在IE11中,但这是不可能的)。
如果我不使用subheader
,nested-content
如本文中所述,那么它将在那些浏览器中正确呈现。但这决定了我的组件需要如何结构,我希望避免这种情况。
通过在Firefox和Edge上做更多的事情,这种工作方式会起作用吗?还是我需要重新考虑嵌套呢?
编辑:我的情况是这样的:在容器级别,我知道最大高度(它是动态计算并在“ Popover”组件中设置的)。但是我不能在子级中设置任何特定的最大高度,因为它们只是Popover的“内容”。而且我不想让整个.container
列表都溢出nested-content
。
.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;
}
<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>
看看这个矮子是否适合您的情况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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句