CSS Flex: Resizing flex box based on image size

user_975234 0
Viewed 507

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>

flexbox css html
1 Answers

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>

user_128217390
Related