I'm experiencing an issue with the display on iOS devices, specifically iPhone 6 and 7. I am creating a news card layout where I set the content height to 100%. However, on these specific iPhone models, the height is being displayed incorrectly (as seen in the browserstack screenshot):
.wrapper__content {
padding: 18px;
flex: 1 1 auto;
height: 100%;
}
https://i.sstatic.net/Emw5f.png
Interestingly, when I remove the height property from .wrapper__content, it works as expected:
.wrapper__content {
padding: 18px;
flex: 1 1 auto;
}
https://i.sstatic.net/abXmH.png
This issue seems to only occur on iPhone 6/7 (possibly other smaller models too), as it works fine on newer iPhones like 8 or X with the same iOS version. It functions correctly on all browsers I tested (Chrome, Firefox, Safari, Internet Explorer, Edge). So, I'm trying to understand why this discrepancy exists.
In my project, it's necessary for me to use height: 100% on .wrapper__content. The issue is not resolved by simply removing the height property. Does anyone have any insights into why this isn't working and how to fix it while still using height: 100%?
Here is a screenshot from browserstack showing that the height: 100% works on iPhone X with the same iOS and Safari version:
https://i.sstatic.net/rHOJI.png
The codepen snippet for reference can be found here: 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>