I have two columun in one section.
The first column in an image.
The second column is just text.
I want these to flex.
The problem is that, the image gets too small when I try to flex-wrap the content any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox with flex-wrap</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.d-column {
flex: 2 1 200px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.img-container {
flex: 1 0 200px;
width: fit-container;
border-raduis: 12px;
}
img {
max-width: 100%;
min-height: 100%;
object-fit: cover;
border-radius: 12px;
aspect-ratio: 2/1;
}
</style>
</head>
<body>
<div class="container">
<div class="img-container">
<img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSCLYgZkVCSbBRILyzR3yMNgiKunVGJ1LaWjZV-8Zy0H-LyGeNGedRizu0F_2bSq_Vsd85DnNveXZlqU7nH0tu4248W0jdu0NM0UBx9waE&usqp=CAc" alt="Image">
</div>
<div class="d-column">
<h2>Column 2</h2>
<p>This is the content of column 2.</p>
<p>This content determines the height of column 1.</p>
<p>This content can be as long as needed.</p>
</div>
</div>
</body>
</html>
I tried flexing using the content it is not working
3
Answers
Does this help:
which gives
This should be help your solution.
Found this to be optimal