2

From what I get from the flexbox definition, items in a flex container are supposed to shrink, proportionally to their flex-shrink value (default 1 so should not need to be explicitely set), once the container gets too narrow.

This works fine in Firefox (not minding that the aspect ratio gets screwed - that can be fixed):

Firefox behaviour

However, in other browsers (namely Chrome, IE and Edge), the elements just flow over the edge of the container:

Chrome and IE behaviour

I've tried setting various values for flex-basis and flex-shrink, no results.

How do I get all browsers to shrink items when the surrounding container gets too small?

Edit: Setting box-sizing: border-box; does NOT solve the problem, it just pushes out the fifth element so it's not visible at all anymore, seemingly fixing the problem (but not actually because all elements need to be visible):

fifth element out of the container

Reduced example that produces the above results:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.flexbox {
  display: flex;
  padding: 5px;
  border: 1px solid black;
  max-width: 450px;
  overflow: hidden;
}

.flex-item {
  margin-left: 10px;
  margin-right: 10px;
}
<div class="flexbox">
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
</div>
Laura
  • 3,233
  • 3
  • 28
  • 45
  • 1
    By default, a flex item cannot be smaller than the size of its content. The initial setting on flex items is `min-width: auto`. You need to override this with `min-width: 0`. https://jsfiddle.net/74sm5dw7/ – Michael Benjamin Jul 20 '16 at 12:57
  • @Michael_B perfect - how come this works in FF? – Laura Jul 20 '16 at 13:01
  • Firefox normally respects `min-width: auto`. It could be that, in this case, because the flex items are placeholder images, browser behavior varies. With content other than those images, the minimum sizing default works in FF, as well. https://jsfiddle.net/74sm5dw7/1 – Michael Benjamin Jul 20 '16 at 13:54
  • 1
    @Michael_B this is actually from a real use case with real images - I just used placeholder images here. behaviour was the same. Feel free to add your comment as an answer and I'll accept it :) – Laura Jul 20 '16 at 14:17

2 Answers2

0

Add box-sizing: border-box; to your .flexbox class.

.flexbox {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  padding: 5px;
  border: 1px solid black;
  max-width: 450px;
  overflow: hidden;
  box-sizing: border-box;
}

.flex-item {
  margin-left: 5px;
  margin-right: 5px;
}
<div class="flexbox">
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
  <img src="http://placehold.it/100x50" alt="placeholder" class="flex-item" />
</div>
San
  • 279
  • 1
  • 8
  • this does merely push the fifth element completely out of the container, so it seems fixed even though there's just one element missing completely now. I've adjusted the question with an updated code example that takes this into account. – Laura Jul 20 '16 at 12:48
0

Please try to add

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
vignesh
  • 951
  • 5
  • 13
  • this does merely push the fifth element completely out of the container, so it seems fixed even though there's just one element missing completely now. I've adjusted the question with an updated code example that takes this into account. – Laura Jul 20 '16 at 12:48