1

I'm using flexbox and I just realised that in a specific image I have flex: 0 0 125px; but the image visible width is 200px.
If I make the flex-basis bigger than the image intrinsic width it keeps the flex-basis size but if I use a flex-basis smaller than its' intrinsic-size it keeps the intrinsic-size and doesn't shrink to the flex-basis.
Basically:
<img> is 200px intrinsic width;
flex: 0 0 250px --- img visible width = 250px;
flex: 0 0 150px --- img visible width = 200px;
flex: 0 0 100px --- img visible width = 200px;
width: 150px --- img visible width = 150px;
If I use width it always works.
Can someone explain or point an explanation, please.

Paulo Janeiro
  • 3,181
  • 4
  • 28
  • 46
  • An initial setting of a flex item is `min-width: auto`. That means that, by default, a flex item cannot be smaller than the size of it's content. Add `min-width: 0` to override the default. – Michael Benjamin Apr 17 '17 at 21:25
  • you can also add / try img {margin:auto} among your tests :) – G-Cyrillus Apr 17 '17 at 21:25
  • @Michael_B. This was exactly what I was looking for! Thank you. I'm trying to use `flex`on every html element that `display: flex`except for fixed or absolute positioned elements. I think it is more pure than use `width`but with ìmg` if I use `width`it looks simpler than `flex: 0 0 120px`and `min-width: 0`. Do you have an opinion? (PS: turn your comment into an answer please, so that I can accept it). – Paulo Janeiro Apr 17 '17 at 21:39
  • @GCyrillus. Thank you! It's great but I was looking for the specs explanation that I was missing. – Paulo Janeiro Apr 17 '17 at 21:41
  • @Michael_B. Sorry. My googling didn't catch that question. thank you again. – Paulo Janeiro Apr 17 '17 at 21:43
  • Even if you use `width` instead of `flex-basis`, the element is still a flex item. That means that `min-width: auto` should still apply. I would not rely on `width` always working to solve this problem. It would be safe to add `min-width: 0` to flex items when you want them to shrink below the content size. – Michael Benjamin Apr 17 '17 at 21:44
  • I don't think there's a need to post a new answer here. I think my answer in the duplicate addresses the issue completely. But let me know if you disagree or have questions. – Michael Benjamin Apr 17 '17 at 21:47
  • 1
    @Michael_B. No, no. I agree. Your other answer is totally clear (I just didn't find it previously). BTW as a coincidence I've read a few answers from you regarding flexbox and grid css as I'm evaluating changing from flexbox to grid as a main display standard. Nevertheless (as a sidenote) I'll keep flexbox only as it has the huge advantage of avoiding plenty of media queries due to its auto responsiveness. really appreciate your support to everyone. Huge thanks Michael! – Paulo Janeiro Apr 17 '17 at 21:53

0 Answers0