У меня странная проблема с использованием flex в браузере Safari. Нижний колонтитул, который у меня есть внутри контейнера flex, не идет ко дну, если содержимое страницы> 100vh. Ниже приведен формат структуры моего сайта. Обратите внимание, что мое приложение Reactjs, и я использую styled-components, который обрабатывает все кросс-браузерные вещи CSS, это просто базовая c структура.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title></title>
<style media="screen">
* {
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.root {
height: 100%;
width: 100%;
}
.page {
height: 100%;
width: 100%;
display: flex;
}
.page_left {
min-width: 100px;
background: black;
height: 100%;
}
.page_right {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
width: 100%;
display: flex;
}
.content_left {
flex: 1;
display: flex;
background: yellow;
}
.content_right {
min-width: 200px;
background: orange;
}
.footer {
min-height: 50px;
background: blue;
width: 100%;
}
</style>
</head>
<body>
<div class="root">
<div class="page">
<div class="page_left"></div>
<div class="page_right">
<div class="content">
<div class="content_left">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.<br /><br /><br />
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
<br /><br /><br />
It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.<br /><br /><br />
Why do we use it? It is a long established fact that a reader
will be distracted by the readable content of a page when
looking at its layout.<br /><br /><br /><br />
The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.
<br /><br /><br />
Many desktop publishing packages and web page editors now use
Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover many web sites still in their infancy.
<br /><br /><br />
Various versions have evolved over the years, sometimes by
accident, sometimes on purpose (injected humour and the like).
<br /><br /><br />
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.<br /><br /><br />
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
<br /><br /><br />
It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.<br /><br /><br />
Why do we use it? It is a long established fact that a reader
will be distracted by the readable content of a page when
looking at its layout.<br /><br /><br /><br />
The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.
<br /><br /><br />
Many desktop publishing packages and web page editors now use
Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover many web sites still in their infancy.
<br /><br /><br />
Various versions have evolved over the years, sometimes by
accident, sometimes on purpose (injected humour and the like).
<br /><br /><br />
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.<br /><br /><br />
It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
<br /><br /><br />
It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.<br /><br /><br />
Why do we use it? It is a long established fact that a reader
will be distracted by the readable content of a page when
looking at its layout.<br /><br /><br /><br />
The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.
<br /><br /><br />
Many desktop publishing packages and web page editors now use
Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover many web sites still in their infancy.
<br /><br /><br />
Various versions have evolved over the years, sometimes by
accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="content_right"></div>
</div>
<div class="footer"></div>
</div>
</div>
</div>
</body>
</html>
По сути, это класс content, где все происходит. Даже если он установлен на flex: 1, он принимает только высоту 100vh, а не полную высоту содержимого. Если я изменю display на block, нижний колонтитул будет сдвинут вниз. Но я не могу изменить свойство display, оно сломало бы все приложение.
Вот скриншоты из chrome и сафари для того же элемента (класс content), который вызывает проблему в моем реальном приложении.
Safari (не работает): 
Chrome (работает нормально): 
Редактировать: Вот схема расположения 