Child of a flex-item not taking parent's height when parent has flex-basis set in a flex container of direction column

Boy that title was a mouthful. Let me explain my confusion:

I have a flex-container and 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 {
   /* negligible css */
}

.child-of-item-1 {
    height: 100%; // shouldn't this always receive the height of its parent?
}

item-1 is set with a flex-basis of 255px using the shorthand flex property. Since I didn't specify a flex-direction on .container, it's defaulting to row. Simple. Great.

Now at a certain screen width, let's say 992px, I switch the flex-direction to column.

@media (max-width: 992px) {
    .container {
        flex-direction: column;
    }
}

Here's where my question comes in. Once <992px, .item-1 still has a height of 255px but .child-of-item-1 loses its height completely. Where have I gone wrong? What am I missing?

It may be important to note that .child-of-item-1 has no content inside of it, but it does have a background-image. I am not seeing the background-image because .child-of-item-1 loses its height, hence my confusion.

I would really appreciate some insight, and thanks again! :)