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
