Here is the HTML code for a div block I am working with:
<div className={'row ge-container'}>
<div className={'a-span3 ge-container-navigation'}>
hello
</div>
<div className={'a-span9 ge-container-content'}>
Okay
</div>
</div>
Below is the CSS associated with it:
.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;
}
The issue I'm facing is that the child element is not inheriting the height of the parent. I attempted to set the min-height of the child element to inherit based on some solutions I found, but this approach fails when the height exceeds 300px.
If anyone has a solution or suggestion for this problem, I would greatly appreciate your help!