html - 具有高度的 IE11 垂直弹性框布局:自动和溢出不起作用
问题描述
我有两个垂直框,两个都有height: auto
,如果内容超过父级定义的最大高度,第二个需要滚动。
.wrapper {
position: fixed;
}
.popup {
position: fixed;
width: 200px;
max-height: 300px;
display: flex;
flex-direction: column;
border: 1px solid black;
}
.a {
left: 0
}
.b {
left: 200px;
}
.header {
flex: 0 0 auto;
border: 2px solid green;
}
.body {
flex: 1 1 auto;
overflow: auto;
}
<div class="wrapper">
<div class="popup a">
<div class="header">
first popup
</div>
<div class="body">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>
</div>
<div class="popup b">
<div class="header">
second <br> popup
</div>
<div class="body">
"Sed ut perspiciatis unde omnis istiam, eaqcabo. Nemo enim ipsam voluptatem quia voluptas
</div>
</div>
</div>
一切都很好,除了在溢出的容器不滚动的 IE11 中。
任何方式我都可以在 IE11 和现代浏览器上获得这种确切的行为?
PS:如果我能够为标题定义高度,会有一个解决方案吗?
解决方案
IE11 中的 Flex 项目忽略容器上的max-height
和。min-height
您的 flex 容器 ( .popup
) 设置为max-height: 300px
.
弹性项目 (header
和body
) 不在乎。他们忽略了那个高度命令。
为了说明此行为,请height: 300px
改用。现在它起作用了。
解决方案#1:如果你可以使用height
代替max-height
,你的问题就解决了。(演示)
此外,虽然这个问题适用于弹性容器,但不适用于弹性项目。min-height
并max-height
在 IE11 中的弹性项目上受到尊重。
因此,您可以制作.wrapper
一个 flex 容器,它也可以将.popup
flex 容器变成 flex 项。现在max-height
按预期工作。
.popup
如果元素不使用固定定位,这足以解决问题。设置为的 Flex 项目position: fixed
从正常流程中移除,包括从 flex 布局中移除。所以这些.popup
项目不再是弹性项目。
解决方案#2:如果您可以在.popup
元素上没有固定定位的情况下工作,那么将父级设置为弹性容器,您可能已经准备就绪。(演示)
参考:
- IE11
min-height
错误报告(似乎也适用于max-height
) - “因为它是外流的,所以 flex 容器的绝对定位子级不参与 flex 布局。”
推荐阅读
- haskell - Haskell 将递归步骤保存到列表中
- javascript - 如何在 v8 中有效地实例化 JavaScript 数组文字?
- visualization - 使用 pyscf 可视化电子密度?
- ruby - Ruby Post 返回 404 URL Not found 而 curl 工作正常
- python - 在 django 视图中处理请求:访问正文
- python - 概率与其大小成正比
- javascript - 尝试在 useEffect 中使用 useState 时出现 TypeError:movieDetails.map 不是函数
- python - 更改一个处理程序的日志记录格式会更改所有处理程序
- oracle - FATAL DBT-10317 指定的 SID 名称已存在
- angular - 如何从 mat-date-picker 和 mat select with time 中获取日期?