为什么固定定位不适用于 iOS 上的 flex？答案

【问题标题】：Why does fixed positioning not work with flex on iOS?为什么固定定位不适用于 iOS 上的 flex？
【发布时间】：2017-06-02 17:19:14
【问题描述】：

我的网站上有一个侧边栏，它隐藏在较小的屏幕上。当用户单击一个按钮时，它会打开。

侧边栏的内容很长，因此需要可滚动。我使用以下方法实现了这一点：

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 700px;
  min-width: 700px;
  max-height: 100%;
  overflow-y: scroll;

我也在使用 flex，所以侧边栏也有这些规则：

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  display: flex;

除了在运行 iOS 9 的旧 iOS 设备（chrome 或 safari）上查看时，侧边栏在所有浏览器中都能很好地显示。问题在于内容重叠 - 似乎固定 div 的高度被忽略了。

Here is a jsfiddle of the issue

如果我从演示中删除 position: fixed，它将在 iOS 中正常显示。或者，如果我删除 flex 设置，它也显示正常。这似乎是两者的结合。

我尝试过的：

height: automin-height: 100%max-height: 100%height: 100vh
bottom: 0
position: absolute // 这不会滚动

如果没有CSS解决这个问题，检查是否使用了ios设备并应用单独的样式表就可以了吗？

非常感谢任何建议。

HTML 完整性：

<div id="sidebar">
  <div class="block">
   text content...
  </div>
<div class="block">
   text content...
  </div>
 ...
</div>

【问题讨论】：

标签： html ios css flexbox

【解决方案1】：

我的解决方案是使用以下方法检测 ios：

/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)

然后将侧边栏css更改为display: block

这并不理想，我仍然不明白为什么iOS在结合fixed和flex时会出现问题......

【讨论】：