Question

有一个包含多个分组项目的容器。这些项目包含不同长度的文本，需要在所有屏幕尺寸上正确分发。

Flex-box非常适合我 - 但不适用于Firefox。

这是问题的简化演示：

＆＃13;

.parent {
  display: flex;
  flex-wrap: nowrap;
  width: 300px;
  border: 1px solid red;
}
.group {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 1;
}
.item {
  flex-shrink: 1;
  padding: 5px;
  font-size: 20pt;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid green;
  margin: 2px;
}

＆＃13;

<div class="parent">
  <div class="group">
    <div class="item">234</div>
    <div class="item"><span>Here is some text to strech a box</span></div>
    <div class="item">234</div>
  </div>
  <div class="group">
    <div class="item">34</div>
    <div class="item">fsdf</div>
  </div>
</div>

＆＃13;

在jsfiddle.net上相同：https://jsfiddle.net/ea0c2gmc/5/

在Chrome和IE浏览器中，它按预期工作 - flex-shrink接管项目大小，以便根据需要剪切和隐藏内容文本。

但是在FF中，同样的例子看起来物品宽度比flex-shrink有更高的优先级 - 实际上没有收缩......

这似乎仅在嵌套的flex-box对象的情况下发生。

感觉很像我看不到的东西。请帮我搞清楚！

flex-shrink不适用于Firefox中的嵌套式flex-box

0 个答案: