Перекрытие CSS flexbox элементов в Safari

Каков правильный CSS, чтобы заставить Safari не перекрывать элементы flex в контейнере Flex по умолчанию?

Safari, кажется, дает слишком большую ширину для гибких элементов с большим количеством контента.

Safari: (v8.0.8 на Mac OS X 10.10.5 Yosemite)

Элементы flex отлично отображаются в Chrome и Firefox.

Chrome:

CSS

main {
   display: flex;
   border: 3px solid silver;
   }
main >div {
   background-color: plum;
   margin: 10px;
   }

HTML:

<main>
   <div>
      Doh!!!!!!!!!!!
   </div>
   <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam.
   </div>
</main>

Скриншот с кодом:
http://jsfiddle.net/LL05grus/6

Ответы

Ответ 1

Элемент сжимается. Вам нужно установить свойство flex-shrink на 0 на сокращающемся элементе.

main >div:first-child {
  -webkit-flex: 0;
  flex-shrink: 0;
}

Ответ 2

У меня также была аналогичная проблема, когда направление гибкой коробки изменилось на элементы, перекрывающиеся столбцами на iPad. Проблема заключалась в свойстве flex: 0 1 0;, примененном к дочернему элементу. Дайте базовое значение auto. flex: 0 1 auto;

.parent{
    display: flex;
    flex-direction: column;
}
.parent .child{
    flex: 0 1 auto;
}