淘先锋技术网

首页 1 2 3 4 5 6 7

我有一个装有两件物品的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>