Chrome、Flexbox 和胖 div答案

【问题标题】：Chrome, Flexbox and fat divChrome、Flexbox 和胖 div
【发布时间】：2016-04-10 06:18:50
【问题描述】：

尝试更好地理解 flexbox。

在 Firefox 中，这个 sn-p 可以正确处理左栏，但在 Chrome 中，右栏太宽，左栏太窄。

如何让它与 Chrome 一起使用？

.child {
  border: solid 1px;
}
.left {
  width: 100px;
}
.container {
  display: flex;
  display: -webkit-flex;
}

<div class="container">
  <div class="child left">
    I'm left!
  </div>
  <div class="child right">
    And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat!
    And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and
    fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right
    and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm
    right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat!
  </div>
</div>

【问题讨论】：

将min-width: 100px 添加到.left
好的，成功了。但是为什么简单的width在Firefox中可以工作，而Chrome却要求min-width？..
对于初学者来说，你可以称之为 freakin' browser quirks。对于测试和开发，我建议使用最接近 W3 规范的 Firefox Developer Edition。对于怪癖，你只需要记住这个解决方案，因为你会一次又一次地遇到它......试过IE了吗？呃。我实际上已经停止使用供应商前缀。到目前为止，一切运作良好。（自动前缀是最好的，顺便说一句）
不开玩笑，Delphi 开发人员？小世界，我的上一份工作（公元 1653 年）是 Delphi 7.x
好的，谢谢 =-) 我尝试成为后端编码员的另一个理由，远离这个 =-)

标签： html css google-chrome flexbox

【解决方案1】：

在 Firefox 中，这个 sn-p 可以正确处理左栏，但在 Chrome 中，右栏太宽，左栏太窄。

它实际上在 Firefox 中不起作用。 .left 在 FF 中的计算宽度约为 84px，而不是 100px。

在 Chrome 中，它只是缩小以适应内容。

显然，不同的浏览器以自己的方式处理默认最小尺寸的弹性项目。

跨浏览器的解决方案是定义flex-shrink。

代替：

.left { width: 100px; }

试试：

.left { flex: 0 0 100px; } /* don't grow, don't shrink, width is 100px */

DEMO

在此处了解有关 flex 属性的更多信息：

【讨论】：

非常感谢！没有注意到firefox也缩小了列=-)