为什么我的flex项目中的div的高度如此之小？
为什么我的flex项目中的div的高度如此之小？
提问于 2021-04-26 05:02:46
我有一个问题，在我的flex项目中div的高度非常小，如下图所示。(在第二个和第三个flex项目上很难看到红线。)我已经附加了HTML，CSS和一个jsfiddle。如果我为div使用一个固定值，它会工作得很好。非常感谢您的帮助！
https://jsfiddle.net/a9bnodu3/3/
* {
box-sizing: border-box;
}
.flexbox-container {
height: 200px;
display: flex;
}
.flexbox-container-one {
justify-content: center;
}
.flexbox-container-two {
flex-direction: column;
}
.flexbox-item {
width: 37.5%;
margin: 10px;
border: 3px solid #333;
background-color: #777;
}
.flexbox-item-edge {
width: 12.5%;
height: 100%;
flex-grow: 1;
}
.flexbox-item-nav {
flex-shrink: 0;
height: 100%;
flex-grow: 4;
}
.flexbox-item-snub {
flex-shrink: 0;
height: 100%;
flex-grow: 4;
}
.grid-container {
display: grid;
flex: auto;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
.grid-item {
border: 1px solid black;
background-color: tomato;
}<div class='flexbox-container flex-container-one'>
<div class='flexbox-item flexbox-item-edge'>
</div>
<div class='flexbox-item flexbox-item-nav'>
<div class='grid-container'>
<div class='grid-item'>
</div>
<div class='grid-item'>
</div>
<div class='grid-item'>
</div>
<div class='grid-item'>
</div>
</div>
</div>
<div class='flexbox-item flexbox-item-snub'>
<div class='flex-container flex-container-two'>
<div class='grid-item'>
</div>
<div class='grid-item'>
</div>
</div>
</div>
<div class='flexbox-item flexbox-item-edge'>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-26 05:56:25
尝试将这个添加到你的css中：
.grid-container {
height: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67258258
复制相关文章
相似问题
腾讯云开发者
