html - 为什么文本换行时div的宽度不正确？

This question already has answers here:

Prevent flex item from shrinking [duplicate]
                                
                                    （2个答案）
                                
                        
                                3个月前关闭。
            
                    
这是我的代码：

<div style="width:50%;display:flex;background-color:aquamarine;justify-content:flex-start;flex-direction:row;">
    <div style="word-break:break-word;display:flex;">112121231231231231233111231123123123123123231231231232312312312312323123123123312312312312323123123123123123123123123123</div>
    <div style="width:40px;background-color:bisque;display:flex;"></div>
    <div style="width:40px;background-color:brown;display:flex;"></div>
</div>

好吧，我在Chrome版本77.0.3865.90中运行了代码之后，结果就是这样的：


如您所见，即使我将浓汤色div的宽度设置为40px，也仅显示12.44px。



还没有其他CSS集。
而且，我发现如果不需要包装上下文，一切都很好。我只希望第二个和第三个div正确呈现，并且第一个div自动换行。
我该如何解决？谢谢。

最佳答案

在带有flex-shrink: 0的两个元素上添加width以避免调整大小。

默认情况下，所有元素的flex-shrink均为1，因此，如果内容太大，每个元素将以相同的比例缩小。通过设置flex-shrink: 0，您禁止缩小这些元素，因此仅第一个元素将被调整大小。