Wow, that title was long! Let me try to clarify my confusion:
So I have a flex-container with 2 flex items.
<!-- HTML -->
<div class="container">
<div class="item-1">
<div class="child-of-item-1"></div>
</div>
<div class="item-2></div>
</div>
/* CSS */
.container {
display: flex;
}
.item-1 {
flex: 0 0 255px;
}
.item-2 {
/* insignificant css */
}
.child-of-item-1 {
height: 100%; // should it not inherit the parent's height?
}
So, item-1 has a flex-basis of 255px set using the flex shorthand. Since no flex-direction is specified for .container, it defaults to row.
Now, let's say at a screen width of 992px, I change flex-direction to column.
@media (max-width: 992px) {
.container {
flex-direction: column;
}
}
Here's where I'm puzzled. After 992px, although .item-1 maintains a height of 255px, .child-of-item-1 loses its height completely. What am I missing here? Where did I mess up?
One thing to mention is that .child-of-item-1 contains no content, only a background-image. The background-image isn't visible because .child-of-item-1 loses its height – hence my dilemma.
I'd really appreciate some guidance on this. Thanks a lot! :)