flex-shrink行为在不同的浏览器中 [英] flex-shrink behaviour in different browsers

问题描述

从flexbox定义中得知，一旦容器变得太窄，Flex容器中的项目应该按照它们的flex-shrink值（默认为1，所以不需要明确设置）缩小。 / b>

这在Firefox中可以正常工作（并不是说长宽比被搞砸了 - 可以修复）：

我试着设置不同的值flex-basis和flex-shrink，没有结果。

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

编辑：设置 box-sizing：border-box; 不能解决问题，它只是推出第五个元素，因此看起来不再可见修复问题（但实际上并不是因为所有元素都需要可见）：

产生上述结果的简单例子：

* {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;}。flexbox {display：flex;填充：5px;边框：1px纯黑色; max-width：450px; overflow：hidden;}。flex-item {margin-left：10px; {code>< div class =};}}}

pre> * {
-webkit-box-sizing：border-box;
-moz-box-sizing：border-box;
box-sizing：border-box;
}


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>

解决方案

Please try to add

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

这篇关于flex-shrink行为在不同的浏览器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！