Safari flexbox не содержит его элементов должным образом

Я создал простую страницу flexbox, которая корректно отображается в Google Chrome (версия 44.0.2403.157), но не в Safari (версия 8.0.2 (10600.2.5)). Я добавил все соответствующие префиксы (я думаю) и потратил много времени на инспектора, но, похоже, я не нашел причину проблемы.

Страница состоит из контейнера и двух гибких строк. Первая гибкая строка (заголовок) должна иметь свою высоту, чтобы соответствовать ее содержимому. Вторая строка (контент) flex должна иметь высоту высоты браузера минус высота заголовка, для переполнения этого контейнера устанавливается прокрутка. Код работает нормально, когда содержимое контейнера не нужно прокручивать, но как только контейнер содержимого имеет переполнение, строка заголовка больше не содержит его содержимое. Что может быть причиной этого?

Код:

<html>
<head>
    <style>
        .box {
            display: -ms-flexbox;  /* IE 10 */
            display: -webkit-flex; /* Safari 6 */
            display: flex;         /* Modern browsers */
            -ms-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
            flex-flow: column;
            height: 100%;
            width: 100%;
            border: 2px solid;
        }


        .box .row {
            flex: 0 1 30px;
            border: 2px solid;
            width: 100%;
        }

        .box .row.header {
            -ms-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            flex: 0 1 auto;
        }

        .box .row.content {
            -ms-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            flex: 1 1 auto;
            overflow: scroll;
        }

    </style>
</head>

<body>
    <div id="page-wrapper" style="height: 100%">
        <div class="box">
            <div class="row header">
                <p>Header - The height of the header is based on the content</p>
                <p>Header - The height of the header is based on the content</p>
            </div> <!-- end of flex row header -->
            <div class="row content">
                <p>When the content box is full, the header row does not contain change its length to contain its content properly</p>
            </div> <!-- end of flex row content -->
        </div> <!-- end of flex box -->
    </div> <!-- end of page wrapper -->
</body>
</html>

Правильно отображается с полем содержимого без переполнения:

Неправильно отображается содержимое поля содержимого с переполнением:

Ответ 1

Причина, по которой заголовок не расширяется, заключается в том, что вы указали flex-shrink: 1 на .box .row.header

Говоря о том, что содержимое разрешено сокращаться, вы позволяете заголовку сжиматься областью содержимого под ним.

Измените это:

.box .row.header {
  -ms-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

Для этого:

.box .row.header {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

И ваша страница теперь будет работать в Safari.

Ответ 2

Это была ошибка в более старых версиях Safari и как они обрабатывают flexbox. В последней версии 10.0.1 это исправлено.