html - 使用 flexbox 和 100% 高度时 iPhone 6 和 7 上的 div 高度错误

Question

我在 iOS iPhone 6 和 7 上遇到问题。我正在构建类似新闻卡片的内容。当您查看内容时，我使用的是 100% 的 height。在 iOS iPhone 6 和 7 上，它采用了错误的 height(来自 browserstack 的屏幕截图):

.wrapper__content {
  padding: 18px;
  flex: 1 1 auto;
  height: 100%;
}

当我删除 .wrapper__content 上 100% 的 height 时，它起作用了:

.wrapper__content {
  padding: 18px;
  flex: 1 1 auto;
}

在我测试的所有浏览器上(Chrome、Firefox、Safari、Internet Explorer 和 Edge ) 有效。它也适用于较新的 iPhone，如 8 或 X(具有相同 iOS 和 Safari 版本的浏览器堆栈)。仅在 iPhone 6/7 上(也可能更小，未测试)似乎不起作用。

我不知道为什么。我试图在这个片段中重建它。注意:在我的元素中，我需要 100% 的 height。这只是一个向您展示问题的片段示例。解决方案不仅仅是删除 height。任何想法为什么这不起作用以及如何修复它并仍然使用 height: 100%; 用于 .wrapper__content？

这也是来自 iPhone X 的 browserstack 的屏幕截图，与 iPhone 6 和 7 具有相同的 iOS 和 Safari 版本，它适用于 100% 的高度:

这里还有代码笔片段:https://codepen.io/STWebtastic/pen/rJjVXX

body {
  box-sizing: border-box;
  background-color: #f0f0f0;
}

.wrapper {
  max-height: none;
  height: auto;
  width: 550px;
  box-shadow: 1px 13px 39px -5px #e2e2e2;
  display: flex;
  flex-direction: row;
}

.wrapper__image-container {
  flex: 0 0 auto;
}

.wrapper__image {
  width: 100%;
  height: auto;
  display: block;
}

.wrapper__item {
  background-color: lightcoral;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin-right: 30px;
}

.wrapper__content {
  padding: 18px;
  flex: 1 1 auto;
  height: 100%;
}

.wrapper__content--without-height {
  padding: 18px;
  flex: 1 1 auto;
}

.wrapper__title {
  margin-bottom: 27px;
  max-height: 80px;
  width: 100%;
}

.wrapper__text {
  margin-bottom: 20px;
  max-height: 75px;
}

.wrapper__title,
.wrapper__text {
  overflow: hidden;
  flex: 0 0 auto;
}

.wrapper__date {
  flex: 0 1 auto;
}

<div class="wrapper">
  <div class="wrapper__item">
    <div class="wrapper__content">
      <h3 class="wrapper__title">Default title</h3>
      <div class="wrapper__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.</div>
      <p class="wrapper__date">08.02.2018</p>
    </div>
  </div>

  <div class="wrapper__item">
    <div class="wrapper__image-container"><img class="wrapper__image" src="http://accessasiatours.com/wp-content/uploads/2017/11/panda.jpg"
        alt="Testimage"></div>
    <div class="wrapper__content">
      <h3 class="wrapper__title">Default title</h3>
      <div class="wrapper__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.</div>
      <p class="wrapper__date">08.02.2018</p>
    </div>
  </div>
</div>

Answer 1

解决方案是删除 .wrapper__item 中的 flex-direction: column;，因为它在旧 IOS 中的 height 有一个错误版本。