I have a problem with a current project where there is a child inside two flex container (both with flex-direction: column). This child has a absolute set height in px while the body element has a height of 100vh set.
In all browser except Safari my child element has the height that is set on it. Safari is the only browser that ignores the height and renders the child at a max of the 100vh from the body.
Is this a bug in Safari and is there any workaround for this?
Problem is that this is a quite complex project with many lines of code that I can not change easily. Therefor I'm looking for a solution that only affects safari and has at least as possible side effects. The height of the child will be set by javascript depending on the content by javascript.
Changing height on body to min-height does work, but this was changed in the past because of other problems. Removing the flex-direction works too but again this will have unwanted side effects on other parts of the page
Here is a (heavily) stripped down version of the problem:
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<style>
body {
background-color: red;
display:flex;
flex-direction:column;
height:100vh;
}
#div1 {
display:flex;
flex-direction:column;
}
#div2 {
height:3060px;
background-color: green;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">Test content</div>
</div>
</body>
</html>
I have also created a jsFiddle here https://jsfiddle.net/7jowr4v1/1/
What I want to archive is that Safari behaves like all the other browsers by having div2 with a height of 3060px and showing scroll bars instead of shrinking the div.