当 parent 的位置固定 且高度为 100vh 时，如何将 flex child 的高度设置为 auto。代码如下(class="firstInnerDiv"是我的弹出窗口)
<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如下
最佳答案
如果您添加 flex-direction: column; 并将 justify-content:center; 更改为 align-items:center; .maindiv规则，.firstInnerDiv中的内容不会自己溢出。
.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>关于html - 高度 : auto on flex item when parent's height is 100vh，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44706993/