I have read tutorial about CSS flexbox and I was trying to practice with that, but there is something I don't understand with my first attempt.
I'm trying to use the full vertical height for the app, with a title on top, and a scrollable list under the title. It's working fine on chrome and safari, but not working on Edge and firefox, and I don't know why.
Here my code, please do not try on codepen or jsfiddle, the result is not as expected, if you want to try, please create an html file with code below (css and html in the same file for the example):
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<style>
body {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
#root {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
border: red 2px solid;
flex-grow: 1;
}
#content {
display: flex;
flex-direction: column;
flex-grow: 1;
border: blue 2px solid;
}
#title {
font-weight: bold;
padding: 10px;
background-color: lightgrey;
}
#list {
display: flex;
flex-direction: column;
flex-grow: 1;
border: orange 2px solid;
overflow-y: auto;
}
.item {
padding:15px;
border-bottom: grey thin solid;
}
</style>
</head>
<body>
<div id="root">
<div id="content">
<div id="title">TITRE DE LISTE</div>
<div id="list">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
<div class="item">
Item 7
</div>
<div class="item">
Item 8
</div>
</div>
</div>
</div>
</body>
</html>
When the windows is too small there is a scroll as expected for the list only in chrome, but it's not working in firefox or edge.
Can someone help me about it or explain why that happens ?Thank you very much.
