Safari（水平溢出，我们必须滚动）

Question

我尝试使用flexbox和sass实现网格。它在Chrome上完美运行，但我在Safari上遇到了一些问题，而且红色框是＃34;溢出的＆＃34;并且没有突破到新的一行

重点是，当Safari窗口小于分辨率屏幕时，它正在工作。

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

Safari（水平溢出，我们必须滚动）

铬

＆＃13;

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

＆＃13;

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

＆＃13;

请告诉我什么是错的，什么可以解决方案，请帮助我？

谢谢

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（水平溢出，我们必须滚动）

铬

1 个答案: