不同浏览器中的flex-shrink行为

Question

根据我从flexbox定义得到的内容，Flex容器中的项目应该缩小，与其flex-shrink值成比例（默认为1，因此不需要明确设置），一旦容器变得太窄。 / p>

这在Firefox中运行良好（并不是说纵横比被搞砸了 - 可以修复）：

然而，在其他浏览器（即Chrome，IE和Edge）中，元素只是流过容器的边缘：

我尝试为flex-basis和flex-shrink设置各种值，没有结果。

当周围的容器太小时，如何让所有浏览器缩小项目？

编辑：设置* { -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>

-------------------------
|Sno   |   allwnce      |
------------------------|
|1     |    HRA         |
------------------------|
|2     |    CA          |
------------------------|
|3     |    TA          |
------------------------|
|4     |    SA          |
------------------------

Answer 1

添加box-sizing：border-box;到.flexbox类。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试添加

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