Safari / Chrome - Flexbox 网格

Question

我尝试使用 flexbox 和 sass 实现网格。它在 Chrome 上运行良好，但我在使用 Safari 时遇到一些问题，红框“溢出”并且不会换行

重要的一点，当 Safari windows 小于它工作的分辨率屏幕时。

最好创建一个新的 html 文件来测试问题并使用 safari 和 chrome 打开此文件。

Safari（横向溢出，我们要滚动）

Chrome

<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>

你能帮我告诉我哪里出了问题以及可能的解决方案吗？

谢谢

Answer 1

问题似乎与

有关

flex: 1 0 345px;
-webkit-flex: 1 0 345px;

我把它改成了

flex: 1 0 calc( 33.33333333% - 14px);
-webkit-flex: calc( 33.33333333% - 14px);

Safari / Chrome - Flexbox 网格

Safari / Chrome - Flexbox grid

css

safari

flexbox

saas

Safari（横向溢出，我们要滚动）

Chrome