gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 12:07:38 25 4
gpt4 key购买 nike

我下面的代码在 Chrome 和 Safari 中运行良好,但在 IE EdgeFirefox 中似乎不起作用(在 IE11 中也不行,但这是不可能的)。

如果我不像 this post 那样使用 subheadernested-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>

最佳答案

看看这个 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;

}

关于css - 使用 flexbox 时溢出属性在 IE Edge 和 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37408483/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com