Я создал простую страницу 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>
Правильно отображается с полем содержимого без переполнения:
Неправильно отображается содержимое поля содержимого с переполнением: