Reputation: 5169

Wrong height of div on iPhone 6 and 7 when using flexbox and height of 100%

I have an issue on iOS iPhone 6 and 7. I'm building something like a news card. When you take a look on the content, there I'm using a height of 100%. On iOS iPhone 6 and 7 it takes a wrong height (screenshot from browserstack):

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

When I remove the height of 100% on the .wrapper__content it works:

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

On all browsers I tested (Chrome, Firefox, Safari, Internet Explorer and Edge) it works. It also works on newer iPhone like 8 or X (browserstack with same iOS and Safari version). Only on iPhone 6/7 (maybe also smaller, didn't test it) it seems not to work.

I can't figure out why. I tried to rebuld it in this snippet. Notice: In my project I need this height of 100%. This is just an snippet example to show you the problem. The solution isn't just to remove the height. Any ideas why this doesn't work and how to fix it and still use height: 100%; for the .wrapper__content?

Here is also a screenshot from browserstack for iPhone X with same iOS and Safari version like the iPhone 6 and 7 and it works with the height of 100%:

Here's also the codepen snippet: 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>

Upvotes: 1