How to prevent image enlarging the cell in flexbox CSS

May 30, 2023

Flexbox parent width should be decided by text inside child1. image inside child2 should grow when parent grows. And parent div should grow until max-width But when I put my image inside it enlarges my parent.

#parent {
  display: flex;
  flex-direction: column;
  min-width: 10px;
  max-width: 240px;
}

<div id="parent">
  <div id="child1">text here should decide parent width</div>
  <div id="child2"><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>

>Solution :

<style>
#parent {
  display: flex;
  flex-direction: column;
  min-width: fit-content;
  max-width: 240px;
}

#child1 {
  word-wrap: break-word; 
}

#child2 {
  flex-grow: 1; 
}

#child2 img {
  width: 100%; 
  height: auto; 
}
</style>

<div id="parent">
  <div id="parent">
  <div id="child1">text here should decide parent width</div>
  <div id="child2"><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>
</div>

If you want the text to wrap onto the next line after reaching the maximum width of the parent
==== update ====

#parent {
  display: flex;
  flex-direction: column;
  min-width: fit-content;
  max-width: 240px;
}

#child1 {
  word-wrap: break-word; 
}

#child2 {
  flex-grow: 1; 
}

#child2 img {
  width: 100%; 
  height: auto; 
}

Here is HTML update:

  <div id="parent">
  <div id="child1">text here should decide parent width</div>
  <div id="child2"><img src="https://picsum.photos/400/100" alt="Image" /></div>

I hope this will help you