css - 如果指定了文本溢出，浏览器如何计算 flexbox 的宽度

Question

全部:

如果我设置一个 flexbox text-overflow: ellipsis;并将其 flex 指定为 1 1 auto；当我缩小那个 flexbox 时，浏览器如何计算 auto 的值？

<style>
    .flexcontainer {
        display:flex;
        flex-flow: row nowrap;
        width:100%;
        height:auto;
    }
    .test {
        flex: 1 1 auto;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space: nowrap;
    }
</style>

<div class="flexcontainer">
    <div class="test">This is a flexbox to thrink</div>
    <div class="test">This is another flexbox to thrink</div>
</div>

它仍然是没有裁剪的全长文本吗？就像浏览器首先在这两个 .test div 中获取没有裁剪的文本总长度，然后使用 .flexcontainer 的宽度减去总长度来获得收缩宽度？

与此相关的另一个问题是:

[1] 浏览器如何判断 flexbox 是收缩还是增长？

[2] 如果我给 flex-basis 一个非常非常大的数字，比如 flex: 1 1 10000000px，浏览器如何计算 thrink？

谢谢

Answer 1

Flex-basis Reference

A flex-basis value set to auto sizes the element according to its size property (which can itself be the keyword auto, which sizes the element based on its contents).

所以根据上面的定义，当容器宽度小于内容宽度时，浏览器使用 text-overflow: ellipsis。