CSS Flex: Resizing flex box based on image size

Question

New to flex boxes. I have a flex box with 2 boxes. The 1st box is supposed to contain an image and the second two <p> texts. I want the first box to resize along with the image so that no extra white space is left around the area if i reduce the image size. I tried using the flex shrink property but doesnt seem to fit to reduce the flex box size when image is reduced. Can anyone help with this?

.headlineContainer{
  display:flex;
  border: red 2px solid;
  
}

#myPhoto{
  border: blue 2px solid;
  flex: 0 1 auto;
}

#myPhoto>img{
  height:50%;

}

#myHeadline{
  border: green 3px solid;
}

<div id="mainContainer" class="headlineContainer" > 
    <div id="myPhoto">
      <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/googleplus512x512.png"/>
    </div>
    
    <div id="myHeadline">
      <p>Hey, This is google</p>
      <p>It helps you find things</p>
  </div>
</div>

Xenvi · Accepted Answer · 2020-08-23T16:53:40.130

0

Add "justify-content: flex-start;" to your container. What this does is prevent the default behavior (which is to 'stretch' the children to fit the parent) and allow the children to only take as much space as they need. It also aligns the children to the start of the container (to the left for rows)

Read this post for more in depth explanation. They use "align-items" since their flex direction is column. Since yours deals with rows, you would use "justify-content": Make flex items take content width, not width of parent container

.headlineContainer{
  display:flex;
  border: red 2px solid;
}

#myPhoto{
  border: blue 2px solid;
  width: 50%;
}

#myPhoto img {
  width: 100%;
}

#myHeadline{
  border: green 3px solid;
}

<div id="mainContainer" class="headlineContainer" > 
    <div id="myPhoto">
      <img src="https://cdn3.iconfinder.com/data/icons/complete-set-icons/512/googleplus512x512.png"/>
    </div>
    
    <div id="myHeadline">
      <p>Hey, This is google</p>
      <p>It helps you find things</p>
  </div>
</div>

edited Aug 23 '20 at 16:53

answered Aug 23 '20 at 07:16

Xenvi

887
5
10

Though it helps to start the items from the beginning inside a flex container, if you reduce the width of the image, there is still the white space left hanging.. .headlineContainer{ display:flex; border: red 2px solid; justify-content: flex-start; } #myPhoto{ border: blue 2px solid; } #myPhoto>img{ width: 50%; background:black; } #myHeadline{ border: green 3px solid; } – Rebooting Aug 23 '20 at 07:44
That is because the div parent of the image (#myPhoto) is the one being affected by the container flex properties. Flex properties only affect the direct children, not grandchildren like the img tag. Since you set the width of the image to be 50% of #myPhoto, the other 50% is uncounted for and will have that white space. – Xenvi Aug 23 '20 at 07:55
I have updated my code sample with a different method instead. If you want to make the image to have 50% width but the container to fill all of the width, you can instead reduce the width of the container to 50% (#myPhoto { width: 50%; }) and then set the width of the img to be the full width of the container (#myPhoto img { width: 100%; }). This will resize the image to be 50% without claiming white spaces in the DOM. – Xenvi Aug 23 '20 at 08:01
Okay. now that i understand that and i know if i remove the parent div (#myPhoto) and set the image as the direct child of the flex container, it will work. Isn't there any way that we can have the div fit the image correctly without the white space? – Rebooting Aug 23 '20 at 08:02
1

Glad to help! I forgot to mention that I added the "align-items: stretch;" to make the "#myHeadline" div fill the full vertical height (essentially, height: 100%). You can remove or edit that to your preference (: – Xenvi Aug 23 '20 at 08:05
@Chandeep this answer is completely wrong, there is no stretch behavior in the main axis (only on the cross axis) and the justify-content is by default flex-start ... the last part is also incorrect because the direction doesn't matter since the properties apply the same, only the main axis and the cross will be inverted. Also adding `align-items: stretch;` will make no difference because the element is not a flexbox container (another mistake) – Temani Afif Aug 23 '20 at 09:18
Oh .. it worked as per @Xenvi's comments. Whats the best solution per you? – Rebooting Aug 23 '20 at 10:52
@Chandeep the only working thing is the fact that you set the image to be width:100% which will logically make the image full width of the container. The explanation related to the other properties is wrong, you can remove them and nothing will change – Temani Afif Aug 23 '20 at 14:06
@Temani Afif is right, I was messing with various flex properties before I came to the updated answer so I forgot to check which properties were still needed for this answer. My apologies! I updated the post removing the extra flex properties and it still works fine. – Xenvi Aug 23 '20 at 16:54

CSS Flex: Resizing flex box based on image size

1 Answers1