Set height to auto when parent height is 100vh
How can I set the flex child's height to auto when the parent's position is fixed and the height is 100vh. the following code (class = "firstInnerDiv" is my popup)
<style>
.maindiv{
position:fixed;
display:flex;
justify-content:center;
left:0%;
top:0%;
width:100%;
height:100vh;
overflow-y:scroll;
background:#8c8c8c;
}
.maindiv .firstInnerDiv{
padding:0px 20px;
margin-top:70px;
border-radius:18px;
height:auto;
position:relative;
width:80%;
background:#fff;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="firstInnerDiv">
<p>1. More contents will be here </p>
</div>
</div>
jsfiddle as follows
+3
source to share
1 answer
If you add flex-direction: column;
and change justify-content:center;
to align-items:center;
per rule .maindiv
, the content in .firstInnerDiv
will not overflow.
.maindiv{
position:fixed;
display:flex;
flex-direction: column;
align-items:center;
left:0%;
top:0%;
width:100%;
height:100vh;
overflow-y:scroll;
background:#8c8c8c;
}
.maindiv .firstInnerDiv{
padding:0px 20px;
margin-top:70px;
border-radius:18px;
height:auto;
position:relative;
width:80%;
background:#fff;
}
<div class="maindiv">
<div class="firstInnerDiv">
<h2>1. this is awesome</h2>
<h2>2. this is awesome</h2>
<h2>3. this is awesome</h2>
<h2>4. this is awesome</h2>
<h2>5. this is awesome</h2>
<h2>6. this is awesome</h2>
<h2>7. this is awesome</h2>
<h2>8. this is awesome</h2>
<h2>9. this is awesome</h2>
<h2>10. this is awesome</h2>
<h2>11. this is awesome</h2>
<h2>12. this is awesome</h2>
<h2>13. this is awesome</h2>
<h2>14. this is awesome</h2>
<h2>15. this is awesome</h2>
<h2>16. this is awesome</h2>
<h2>17. this is awesome</h2>
<h2>18. this is awesome</h2>
<h2>19. this is awesome</h2>
</div>
</div>
+1
source to share