0

I'm trying to have a flex item div to have the same dimensions as its contained image, but it seems the div doesn't know about the image's scaled size and always has the same width as the full sized image, resulting in a visible border on the right side.

I understand that if I remove the .flex-top div everything works as expected, because the .flex-bottom div and its parents have an height of 100%. Once the top div is back, however, it still keeps the same width, as if flex-grow had no effect on its computed height.

I'm pretty sure the problem lies in .flex-bottom's height 100% but can't think of a workaround.

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.flex-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  height: 100%;
  background: white;
}

.flex-top {
  flex: 2;
  background: salmon;
}

.flex-bottom {
  display: flex;
  flex: 1;
  min-height: 0;
  align-self: center;
  background: seagreen;
}

img {
  height: 100%;
  width: auto;
}
<body>
  <div class="flex-container">
    <div class="flex-top">
      <p>Hello, I take 2/3 of the page</p>
    </div>
    <div class="flex-bottom">
      <img src="https://picsum.photos/500" />
    </div>
  </div>
</body>
FlawTECH
  • 61
  • 8
  • 2
    note that this only happen in Firefox. In chrome your code works fine – Temani Afif Apr 01 '20 at 10:15
  • Oh right, thanks, didn't even notice.But in Chrome, if you try to resize the window vertically, there's this weird bug where the div doesn't follow the image's width and the image is not centered anymore. No idea what happens here. – FlawTECH Apr 01 '20 at 10:19
  • it's a complex case of cyclic calculation. Trying to find a related question – Temani Afif Apr 01 '20 at 10:20
  • This might help : https://stackoverflow.com/questions/30113733/css-flexbox-width-100-firefox – Utsav Patel Apr 01 '20 at 10:23
  • here is a related question (almost a duplicate): https://stackoverflow.com/a/58905047/8620333 ... the first part deals with another issue but at the end you have examples with image and explanation about the difference and how to make sure it's *almost* the same cross browser – Temani Afif Apr 01 '20 at 10:27
  • Thanks a lot for your help. I tried the solution provided in your link but it still resizes weirdly. I made a jsfiddle of my changes: https://jsfiddle.net/k1zodwba/ . Did I do something wrong ? @UtsavPatel thank you as well, works great on Firefox but images are not centered on Chrome. How could I make that work ? – FlawTECH Apr 01 '20 at 11:10

0 Answers0