I have been trying to build my portfolio from the ground up instead of using a WYSIWYG website builder thats gonna cost me a lot anyways. It’s been going well thus far. Except for my current issue:

I wanted to display some images in a sleek way and decided to use Flexbox to do so, the markup works well on desktop width when using flex-direction: row;, however when using flex-direction: column; for mobile an issue occurs where flex-grow/flex seems to be ignored.

/* Phones */
@media only screen and (max-width: 810px) {
    .split-container {flex-direction: column;}
}
/* Medium devices */
@media only screen and (min-width: 810px) {
    .split-container {flex-direction: row;}
}
/* Desktop */
@media only screen and (min-width: 1200px) {
    .split-container {flex-direction: row;}
}

.case-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.split-container {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 400px;
    gap: 10px;
}

.split-container div {
    flex: 1;
    transition-duration: 1s;
}

.split-container div:hover {
    flex: 4;
}
.split-container img {
    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
}

<div class="case-info">
            <div class="split-container">
                <div><img src="https://picsum.photos/1080"</div>
                <div><img src="https://picsum.photos/1080"</div>
                <div><img src="https://picsum.photos/1080"</div>
                <div><img src="https://picsum.photos/1080"</div>
                <div><img src="https://picsum.photos/1080"</div>
            </div>
            <h2>Example Header</h2>
            <h2>Example Paragaph</h2>
</div>

I have searching up similiar issues on Stackoverflow, and mostly the answer seems to revolve around giving the parent a fixed height, which I’ve already tried.

Thanks in advance.