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;}}body { width: 100%; }.container-xl { padding 30px 30px;}.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.