假设以下标记:( JSFiddle link )
.parent {
width: 200px;
border: 1px solid #ccc;
height: 300px;
display: flex;
flex-direction: column;
}
.space-avail-sets-height {
overflow: auto;
}
<div class="parent">
<div class="content-sets-height">
<h3>This part should be as tall as it needs to be to fit the content.</h3>
</div>
<div class="space-avail-sets-height">This part should take whatever height is remaining, and then use scrolling to view the content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.</div>
<div class="content-sets-height">This part should be as tall as it needs to be to fit the content.</div>
</div>
如何使 IE11 正确显示高度取决于内容的元素? (不用担心这里溢出的部分)虽然其他所有浏览器都正确地做到了,但我们的老 friend IE 却把它吐到了页面上:
最佳答案
将此添加到您的代码中:
.parent > div:first-child,
.parent > div:last-child {
flex-shrink: 0;
}
无论出于何种原因,IE11 都需要禁用 flex-shrink
。 (可能是因为 min-height: auto
是非 IE 浏览器的默认设置,这意味着元素不能收缩到其内容的高度以下。但是 in IE11 the default may be min-height: 0
。但是话又说回来,添加 min-height: auto
到 IE11 不能解决问题。)
关于html - 如何防止 IE11 中的 flex 元素缩小到小于其内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58489124/