flex-shrink behaviour in different browsers [duplicate]

问题

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):

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

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):

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>

回答1:

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>

回答2:

Please try to add

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

来源：https://stackoverflow.com/questions/38481395/flex-shrink-behaviour-in-different-browsers

标签

css

google-chrome

internet-explorer

flexbox

microsoft-edge