我有一个装有两件物品的flexbox容器。我不希望它们收缩以适应视口宽度,所以我将flex-shrink设置为0。出于某种原因,我的容器下面出现了一个很大的空白空间。检查页面,似乎什么都没有,只是空的。
问题出现在移动设备(Firefox和Chrome)上,当我在Firefox桌面上用开发工具启用触摸模拟时。禁用触摸模拟会移除空白空间。
我已经相当成功地隔离了这个问题,所以这是我重现它所需要的所有css和html:
#container {
display: flex;
gap: 1em;
min-height: 100vh;
}
.item {
background-color: lightgrey;
flex-shrink: 0;
width: 600px;
}
<div id='container'>
<div class='item'></div>
<div class='item'></div>
</div>