Hello. I’m new here and despite this topic being somewhat common on the internet, I have tried for days to find the answer to my problem and I honestly cannot. So, I apologize in advance if my question sounds newbish and redundant.
I’ve attached a screen recording of the issue I’m having. The image to the left looks good until the viewport, hits a smaller breakpoint, then it starts shrinking and not filling up its flexbox.
How can I fix this issue? Below is my code. It’s just a simple flexbox…
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flex-container {
max-width: 960px;
margin: 50px auto;
}
.flex-row {
max-width: 100%;
max-height: 100%;
display: flex;
background-color: blueviolet;
}
.flex-item {
flex: 1;
flex-shrink: 0;
}
.flex-container img {
max-width: 100%;
height: auto;
display: block;
}
@media screen and (max-width: 500px) {
.flex-row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-row">
<div class="flex-item">
<img src="/bacon.jpg" alt="">
</div>
<div class="flex-item">
<h1>Text Container</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, voluptatem. Molestias, quidem assumenda inventore doloribus in corporis temporibus debitis totam, saepe ullam voluptates facere fuga quisquam officiis modi iste eveniet excepturi. Veniam omnis molestias impedit tenetur modi excepturi. Vel, velit!</p>
</div>
</div>
</div>