弹出框文本项溢出 [英] Flex-box text items overflow

问题描述

任何人都可以请解释为什么包含文本的列的宽度不能正确计算，以完全包含每个列中的文本？
在Firefox和Chrome上，第一列和第三列中的文本将不适合框，但令人惊讶的是，在IE 11中，框的大小是否正确？

这是一个浏览器错误吗？

.box {display：flex; border：1px solid #dbdbdb; height：100px;}。box> div {border：1px solid Pink;}

< div类= 框 > < DIV>&与firstItem LT; / DIV> < div> Lorem ipsum dolor sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invorunt ut labore et dolore magna aliquyam erat，sed diam voluptua。< / div> < div> Lastitem< / div>< / div>

>我对替代品不感兴趣。我想知道为什么发生这种情况。 （这就是为什么我把这种情况减少到了非常基本的状态）。

谢谢！

解决方案

这里是Chrome& Firefox 33：
$ b $ ol

每个flex项目都建立一个 flex基础大小，在这个大小写是 max-content width （如果所有的文本都放在一行上，基本上是这个宽度）。请注意，对于中间的Flex项目，这是 HUGE 。

flex容器试图给每个flex项目请求 flex基本大小，但是没有足够的空间可用（因为第二个是贪婪）。因此，我们进入缩小模式。

每个弹性项目默认情况下都有 flex-shrink：1 - so每个弹性项目都会收到一部分负空闲空间，以使其达到正确的最终大小。 （每个项目收到的金额与它们的 flex-shrink 成正比，也与它们的 flex基本大小成比例，这样因此，每个弹性项目的缩小比它所请求的<$（$）小一点。 c $ c> flex base size ，这意味着第一个&最后的项目有一些溢出，中间项目必须包装它的行（可怜的东西）。

正如在评论中指出的，spec 也（相对来说最近）为flex项目添加了一个默认的 min-width ，这通常最终是它们的 min-content宽度（它们的宽度，如果所有可选换行符都被采用） - 并且它可以防止弹性项目被缩小到低于最小大小。我在在Firefox 34中增加了对的支持，我相信IE在他们的支持目前的技术预览也是如此。我不确定什么时候WebKit / Blink会添加支持 - 我提交了一个这个问题至少在几个月前就可以确定，至少在Chrome团队的雷达中是这样的。无论如何，如果你想在浏览器中解决这个问题，还不支持 min-width：auto ，只需在弹出的项目上设置 flex：none 你想缩小 - 第一个和最后一个项目，在你的代码段。这将清除它们的 flex-shrink 值，这意味着在上面的步骤3中，中间的flex项目将获得所有的负空间。

Could anyone please explain why the width of the columns containing text is not computed correctly to fully contain the text in each of the columns? On Firefox and Chrome, the text in the first and third column will not fit the boxes, but surprisingly the boxes are sized correctly in IE 11?

Is this a browser bug?

.box {
    display: flex;
    border: 1px solid #dbdbdb;
    height: 100px;
}
.box > div {
    border: 1px solid Pink;
}

<div class="box">
    <div>Firstitem</div>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div>Lastitem</div>
</div>

I'm not interested in alternatives. I want to know the reason why this happens. (That is why I reduced this situation to something very basic.)

Thanks!

解决方案

Here's what happens here in Chrome & Firefox 33:

1. Each flex item establishes a flex base size, which in this case is their max-content width (the width if all the text is laid out on a single line, basically). Note that this is HUGE in the case of the middle flex item.
2. The flex container tries to give each flex item their requested flex base size, but there's not enough space to go around (because the second one is greedy). So, we go into "shrink" mode.
3. Each flex item has, by default, flex-shrink:1 -- so each flex item receives a portion of the negative free-space, to make them sum to the correct final size. (The amount each item receives is proportional to their flex-shrink and also proportional to their flex base size, so that bigger things shrink more than small things.)

So, each flex item ends up shrinking to be a bit smaller than its requested flex base size, which means the first & last items have a bit of overflow, and the middle item has to wrap its lines (poor thing).

As indicated in the comments, the spec also (relatively recently) added a default min-width for flex items, which generally ends up being their min-content width (their width if all optional linebreaks are taken) -- and it prevents flex items from being shrunk below that minimum size. I added support for this in Firefox 34, and I believe IE supports this in their current "tech preview" as well. I'm not sure when WebKit/Blink will add support -- I filed a bug a few months ago to be sure it's on the Chrome team's radar, at least.

Anyway -- if you want to work around this in browsers that don't yet support min-width:auto, just set flex:none on the flex items that you don't want to shrink -- the first and last items, in your snippet. That zeroes out their flex-shrink value, which means in step 3 above, the middle flex item will get all of the negative space.

这篇关于弹出框文本项溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！