3

I'm trying to create a page that will retain its proportions across all desktop monitor screen sizes.

To that effect, I made a flex layout in which I intend to have a small place for an image within one of its subdivisions.

The problem is that once I insert the image into the tag, the container flex element grows disproportionately breaking the whole layout. Anyone have any ideas why that is?

Here is the codepen with the CSS.

<div id="main">
  <section id="profile-page" class="container">
    <div id="profile-picture-container">
       <div id="profile-picture">
          <img id="profile-picture-img " src="http://static.compare-    imports.com/thumbs/6/2014/8/3/Pixel-Pawn-TF362-Wireless-Remote-Flash-Trigger-For-1181993.jpg"></img>
       </div>
       <div id="speech-bubble">
       </div>
    </div>
    <div class="profile-details-container">
    </div>
  </section>
  <section id="side-page">

  </section>
</div>

If you remove the image, the layout is as it should be. Once you add it, the parent element grows too large disrupting the flow of everything else.

vsync
  • 118,978
  • 58
  • 307
  • 400
mrtiev
  • 43
  • 1
  • 2
  • 4
  • I would start troubleshooting by reading these two posts: [***how `flex-grow` works***](http://stackoverflow.com/a/38411910/3597276) and [***don't use percentage units on margin and padding in flexbox***](http://stackoverflow.com/a/36783414/3597276). – Michael Benjamin Jul 17 '16 at 14:48
  • The image src is dead. please choose a generic image from someplace "normal" like `Placehold.it` – vsync Jul 17 '16 at 16:11
  • You should probably try to rephrase the question. Both answers seem to do exactly what you are asking for. Quick answer: your container is growing to accommodate the img, which has 180px width. You can change it by setting the img width to 100%, to have it adapt to the parent. What do you expect the img to do? – Rob Monhemius Jul 18 '16 at 14:48

2 Answers2

0

You can define a maximum width for the image, so it won't affect it's parent: 

#profile-picture-img {
  max-width: 100%;
}
Hugo Silva
  • 6,748
  • 3
  • 25
  • 42
  • This solution doesn't work. And neither does settting the width to 100%. I'm going to try removing the percentage from the margins and paddings to see if it maybe changes anything. – mrtiev Jul 18 '16 at 12:35
0

The fix it that you need to give the image itself a width, else it will use it's natural width and ignore the flex:1 property, because that's how HTML images work.

Change this to:

#profile-picture-img {
  width: 100%;
  background-color: blue;
}

Read more about this bug here

vsync
  • 118,978
  • 58
  • 307
  • 400
  • Setting a width isn't affecting the parent. All it's doing is disallowing the image to grow with the expanse of the parent, so it stays small but the parent grows all the same. – mrtiev Jul 18 '16 at 12:36
  • @mrtiev - could you make a screenshot of what you want it to look like? I don't understand what you want.. – vsync Jul 18 '16 at 16:54
  • I apologise for not coming here sooner. I needed to set the width, yes. But I also needed to set the flex-basis. Setting those two things made it happen. For clarification, I wanted the parent element not to grow when I added something inside it. I thought simply determining a flex-grow to the two child elements would mean they would retain that size no matter what. – mrtiev Jul 19 '16 at 17:21