I have encountered an issue while trying to implement a grid using flexbox and sass. It seems to be functioning smoothly on Chrome, but I am facing some problems with Safari. The red boxes are "overflowed" and do not break to a new line as expected.
An important observation is that the grid works fine in Safari when the browser window is smaller than the screen resolution.
To troubleshoot this issue, it might be beneficial to create a new HTML file specifically for testing the problem and compare the results between Safari and Chrome.
Safari (horizontal overflow, requiring scrolling)
https://i.sstatic.net/JnZY7.png
Chrome
https://i.sstatic.net/OPE3v.png
<style>
.flex-parent {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: flex-start;
-webkit-justify-content: flex-start;
margin-left: -14px;
margin-top: -14px;
margin-bottom: 14px;
}
.flex-parent .event_card {
flex: 1 0 345px;
-webkit-flex: 1 0 345px;
margin-left: 14px;
margin-top: 14px;
padding: 14px;
box-sizing: border-box;
height: 140px;
background: red;
}
@media (min-width: 690px) {
.flex-parent .event_card {
max-width: calc( 50% - 14px);
}
}
@media (min-width: 1035px) {
.flex-parent .event_card {
max-width: calc( 33.33333333% - 14px);
}
}
@media (min-width: 1035px) {
.flex-parent .event_card {
min-width: calc(33.33333333% - 14px);
}
}
</style> <html>
<body>
<div id="content">
<div class="flex-parent feedify-item-body">
<div class="event_card">
<div class="wrapper Aligner">
<div class="card__front"></div>
</div>
</div>
<div class="event_card">
<div class="wrapper Aligner">
<div class="card__front"></div>
</div>
</div>
<div class="event_card">
<div class="wrapper Aligner">
<div class="card__front"></div>
</div>
</div>
<div class="event_card">
<div class="wrapper Aligner">
<div class="card__front"></div>
</div>
</div>
<div class="event_card">
<div class="wrapper Aligner">
<div class="card__front"></div>
</div>
</div>
<div class="event_card">
<div class="wrapper Aligner">
<div class="card__front"></div>
</div>
</div>
<div class="event_card">
<div class="wrapper Aligner">
<div class="card__front"></div>
</div>
</div>
</div>
</div>
</body>
</html>If you could provide some insights into what may be causing this issue and suggest possible solutions, I would greatly appreciate it.
Thank you