Flexbox не укладывается в Safari

Возникли некоторые проблемы с получением моих плиток Flexbox для стека в точках останова в Safari (для этого purporse v10.0). Вот пример codepen, показывающий, что я пытаюсь сделать.

Есть довольно много вопросов / ответов здесь уже по этой же теме, но мне еще предстоит найти решение, которое исправит мою конкретную проблему. Я протестировал с префиксами поставщиков и без префиксов поставщиков. Удаление свойств calc () и min-width! Это что-то другое? Вот суть того, что я пытаюсь сделать…

.tile-container
   display: flex
   flex-wrap: wrap

.tile
   flex: 1
   margin: 3px
   padding: 2rem
   min-width: calc(25% - 0.75rem)
   min-height: 200px
   text-align: center
   color: #fff
   background: tomato

.tile-icon
   width: 100%
   max-width: 50px

.tile-title
   display: block
   padding-top: 10px

.tile-content
   margin-top: 30px

@media (max-width: 768px)
.tile
   width: 50%
   min-width: calc(50% - 0.75rem)
@media (max-width: 480px)
.tile
   min-width: calc(50% - 0.75rem)
@media (max-width: 380px)
.tile
   min-width: 100%

…элементы должны укладываться вертикально на меньшие экраны и лежать горизонтально на больших. Однако в Safari он всегда горизонтальный, никогда не стекается (когда размер браузера регулируется).

Я могу предоставить запасной вариант (ы), но я действительно хотел бы помочь investagting, где я мог бы пойти не так с этим. Может кто-нибудь помочь мне понять, что я мог бы упустить?

1 ответ

  1. Таким образом, я, кажется, нашел свой собственный ответ после еще нескольких экспериментов…

    Решение, которое кажется работающим, вместо flex: 1того, чтобы я смог сделатьflex: 1 0 calc(25% - 0.75rem), и результаты ожидаются.

    Надеюсь, это поможет вам в будущем