最小高度：300px 的父级的子项不是继承父级身高

Question

我有如下所示的div块：

<div className={'row ge-container'}>
<div className={'a-span3 ge-container-navigation'}>
hello
</div>
<div className={'a-span9 ge-container-content'}>
Okay    
</div>
</div>

将css作为

.ge-container {
min-height: 300px;
}
.ge-container-navigation {
background-color: $light-gray-background;
display: inline-block;
float: left;
height: inherit;
margin: 5px 0 0 0;
padding: 10px 8px 0 8px;
border: 1px solid $gray;
}
.ge-container-content {
display: inline-block;
height: inherit;
}

子项没有继承父项的高度。我通过看到一些答案，尝试了将孩子的最小身高设置为继承的解决方案。但是，当高度超过300px时，这将失败。

有人能帮上这个吗

Answer 1

请在.ge-container父级中使用display: flex;CSS。

此代码仅使用CSS使高度为100%的子flex框。

.ge-container {
min-height: 300px;
display: flex;
}

更新片段：-

.ge-container {
min-height: 300px;
display: flex;
}
.ge-container-navigation {
background-color:red;
display: inline-block;
float: left;
height: inherit;
margin: 5px 0 0 0;
padding: 10px 8px 0 8px;
border: 1px solid $gray;
}
.ge-container-content {
display: inline-block;
height: inherit;
}

<div class="row ge-container">
<div class="a-span3 ge-container-navigation">
hello
</div>
<div className="a-span9 ge-container-content">
Okay    
</div>
</div>

Answer 2

您也可以使用javascript/jquery 进行尝试

$('.ge-container-navigation').height($('.ge-container'));

如果你想让它在旋转模式下更新自己：

setInterval(function(){
$('.ge-container-navigation').height($('.ge-container'));
}, 10);

感谢