In the following markup below Col1 and Col2 inside the grid will blow out in height on MacOS Safari 14. What's interesting is that it blows out (off screen) by the exact height of the div above the grid. Is this a Safari bug and are there any work arounds OR have I missed something in my CSS?
Screenshot from MacOS Safari 14
Screenshot from Chrome
<!DOCTYPE html>
<html lang="en" class="h-full">
<style>
html,
body {
height: 100%;
margin: 0;
}
.h-full {
height: 100%;
}
.h-10 {
height: 2.5rem;
}
.min-h-0 {
min-height: 0;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-auto {
flex: 1 1 auto;
}
.grid {
display:grid;
}
.grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.col-span-1{
grid-column: span 1 / span 1;
}
.flex-initial {
flex: 0 1 auto;
}
.bg-green {
background-color: rgb(12, 236, 12);
}
.bg-pink {
background-color: rgb(248, 47, 255);
}
.bg-blue {
background-color: rgb(110, 230, 252);
}
.bg-yellow {
background-color: yellow;
}
</style>
</head>
<body class="h-full">
<div id="sapper" class="h-full">
<div class="flex flex-col h-full">
<header class="flex-initial">
Navigation
</header>
<main class="flex-auto h-full flex flex-col">
<div class="flex-initial h-10 bg-yellow">
Middle
</div>
<div class=" bg-pink grid grid-cols-3 flex-auto min-h-0">
<div class="col-span-1 bg-green">Col 1</div>
<div class="col-span-1 bg-blue">Col 2</div>
</div>
</main>
</div>
</div>
</body>
</html>