While it functions properly in other browsers, the issue arises in Safari. I require the flex items to occupy the entire width on screens smaller than 768px. Currently, they are taking up the full width of their container but remaining in a single line, whereas I need each item to be on its own line. The problem lies with the wrap value of flex-wrap, which should display elements in new lines when there isn't enough space along the main axis. However, this feature does not seem to work on Safari 9.0 and I am seeking an explanation for this behavior. When each element is set to be 100% wide, there is insufficient space for two elements and new lines should naturally be created.
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item{
width: 100%;
max-width: 100%;
min-width: 100%;
flex: 1 0 0%;
}
@media screen and (min-width: 768px){
.flex-item{
min-width: 0;
}
}<div class="flex-container">
<div class="flex-item" style="background-color: red">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, perferendis! Excepturi beatae sequi ipsum, temporibus obcaecati reprehenderit dolore expedita nisi facere alias optio maiores recusandae unde! Voluptas minus atque adipisci!</p>
</div>
<div class="flex-item" style="background-color: orange">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam, corrupti eaque quos recusandae molestias provident voluptate obcaecati consequuntur quasi perspiciatis nam fugit quibusdam deleniti sit enim adipisci repellendus? Eum, nisi.</p>
</div>
</div>This image shows how my example appears on Chrome:
https://i.sstatic.net/CWHhz.png
And here is how it looks on my iPhone running Safari 9.0: