当高度为 100% 时，如何阻止弹性项目溢出到父级之外
如果你看一下示例片段，我试图#feature_header_container（以红色）展开以填充剩余的高度header，但因为我在里面有其他内容，header如图所示<p>，当我设置height: 100%它时，#feature_header_container它会溢出到外面header，但我希望它只扩大 的剩余高度header，我该怎么做？
现在，#feature_header_container（红色）溢出到外部并被内部的第一个元素header压低。<p>header
*
{
font-family: Arial;
box-sizing: border-box;
}
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header
{
display: block;
height: 100%;
min-height: 100vh;
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
-webkit-box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.57);
box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.57);
border-radius: 0 0 80px 80px;
padding-left: 10%;
padding-right: 10%;
}
#p_test
{
display: inline-block;
}
#feature_header_container {
display: flex;
height: 100%;
margin-top: 20px;
background-color: red;
align-items: center;
}
#feature_container {
display: inline-flex;
flex-grow: 1;
justify-content: center;
background-color: blue;
color: white;
}
.feature_box {
background-color: pink;
}
<html>
<body>
<header>
<p id="p_test">
Test Test Test
</p>
<div id="feature_header_container">
<div id="feature_container">
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
<div class="feature_box">
<p>Test</p>
</div>
</div>
</div>
</header>
<main>
<p>TesttestTesttestTesttestTesttestTesttest</p>
</main>
</body>
</html>
森栏1回答
-
皈依舞
感谢遇到这个小提琴：https://jsfiddle.net/MadLittleMods/LmYay/我设法解决了我的问题并有一个工作示例：https://jsfiddle.net/p459qvfk/2/工作示例复制过来：* { font-family: Arial; box-sizing: border-box;}html,body { height: 100%; width: 100%; margin: 0; padding: 0;}header { display: flex; flex-direction: column; justify-content: flex-start; /* align items in Main Axis */ align-items: stretch; /* align items in Cross Axis */ align-content: stretch; /* Extra space in Cross Axis */ min-height: 100vh; background-color: #21D4FD; background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%); -webkit-box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.57); box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.57); border-radius: 0 0 80px 80px; padding-left: 10%; padding-right: 10%;}#p_test { display: inline-block;}#feature_header_container { display: flex; flex: 1; background-color: red; align-items: center;}#feature_container { display: inline-flex; flex: 1; justify-content: center; background-color: blue; color: white;}.feature_box { background-color: pink;}<html> <body> <header> <p id="p_test"> Test Test Test </p> <p id="p_test"> Test Test Test </p> <div id="feature_header_container"> <div id="feature_container"> <div class="feature_box"> <p>Test</p> </div> <div class="feature_box"> <p>Test</p> </div> <div class="feature_box"> <p>Test</p> </div> </div> </div> </header> <main> <p>TesttestTesttestTesttestTesttestTesttest</p> </main> </body></html>
随时随地看视频慕课网APP
相关分类
Html5