-1

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>
OuzKagan
  • 482
  • 4
  • 8
  • 2
    I made a snippet for you. Since you didn't specify how the image looks, I had to take a guess. Please edit your question to modify the `` tag if it doesn't reflect your problem. – InSync May 30 '23 at 12:18
  • you can size down your image and then give it a min-width to 100% : `#parent img { width: 0; min-width: 100%; }` so the image doesn't go beyond its parent ;) – G-Cyrillus May 30 '23 at 14:06

1 Answers1

1

Quickly, To illustrate my comment How to prevent image enlarging the cell in flexbox CSS , but there got to be duplicates about this

.parent,
#parent {
  display: flex;
  flex-direction: column;
  min-width: 10px;
  width:max-content;
  max-width: 240px;
  border: solid;
}

.parent img,
#parent img {
  width: 0;
  min-width: 100%;
}
<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 class="parent">
  <div>t</div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>

<div class="parent">
  <div>text</div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>

<div class="parent">
  <div>text here</div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>
<div class="parent">
  <div>text here should </div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>
<div class="parent">
  <div>text here should decide parent width . IS that clear?</div>
  <div><img src="https://picsum.photos/400/100" alt="Image" /></div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • thank you for your effort. but I want my parent and image to grow with text the inside child1 until it hits to max width. – OuzKagan May 30 '23 at 15:20
  • @OuzKagan did you try it, because it is what it does, if no text, you won't see the image ;) **snippet updated for your test** . Mind also that the parent do size itself from its content .... here the CSS for the image's width will only follow parent's width it won't make it shrink nor expand. **img size was not your first trouble**. – G-Cyrillus May 30 '23 at 19:18