Html 将文本添加到div会更改其相邻部分的宽度

我有以下HTML代码：

<div class="row">
    <div class="column1"></div>
    <div class="column2"></div>
    <div class="column3"></div>
</div>

Class

.row

是设置为行的flexbox。类

column1

和

column2

在CSS中设置了固定宽度属性。但是class

column3

没有该属性。当我向该容器添加文本时，它会更改其余两个容器的宽度

我尝试了属性

空白：无换行

，

溢出：隐藏

，

溢出换行：断开单词

---

这些属性都不能阻止更改其他两列的宽度。如何修复它，使所有三列都具有固定的宽度，但当窗口大小更改时，

column3

将自动调整？

如果将

flex-shrink:0

添加到

column1

和

column2

flex项中，这将防止它们变小。（

flex-grow:0

对于变大也会这样做，但这已经是此属性的默认设置，因此您无需添加它。）

谢谢您的建议！这有帮助！然而，还有一个问题我以前没有意识到。现在，当column3左侧的所有列都具有固定宽度且不收缩时，column3的宽度将增长到可用的100%备用大小，即整个窗口的大小。我尝试使用calc（100%固定列宽度），但没有效果。如何创建一个规则，使第3列的100%宽度表示父项的100%宽度，而不是正文的100%宽度？