Javascript 禁用调整固定flex的大小

我正在使用下面的html在我的网站上显示flex视图。但是从div更改文本（文本长度）将导致外观疯狂的自动调整大小

如何避免与下面这个特殊的div元素相关的调整大小？单击“单击”按钮时如何保持相同的布局

---

编辑：我希望任何元素的大小和位置都不会改变。（不管里面有多少文字！）

信息A
文本1
信息B
文本2
信息C
文本3

添加

flex:1033%添加到不想调整大小的元素。这相当于：

flex-grow: 1;
flex-shrink: 0;
flex-basis: 33%;



信息A
文本1
信息B
文本2
信息C
文本3






.wrapper{
宽度：100%；
背景：黑色；
显示器：flex；
证明内容：周围的空间；
文本对齐：居中；
颜色：白色；
}
.wrapper>div{
弹性：1；
文本溢出：省略号；
溢出：隐藏；
}

信息A
文本1
信息B
文本2
信息C
文本3





下面是一个在代码中使用
最大宽度的示例。第一个块的宽度永远不会超过
150px
，溢出的文本将被隐藏


.wrapper{
宽度：100%；背景：黑色；显示：柔性；对齐内容：周围空白；文本对齐：居中；颜色：白色；
}
.wrapper>div{
弹性：1；
文本溢出：省略号；
溢出：隐藏；
}

信息A
文本1
信息B
文本2
信息C
文本3





以下是解决方案：


document.addEventListener（“单击”），函数（e）{
如果（e.target.id==“按钮”）
document.getElementById（'text'）.innerHTML+='；
});
#导航{
位置：固定；
宽度：100%；
身高：30%；
左：0%；
最高：0%；
背景：黑色；
显示器：flex；
证明内容：周围的空间；
文本对齐：居中；
颜色：白色；
弹性基准：1100%；
}
#导航>分区{
弯曲方向：立柱；
溢出：隐藏；
宽度：100%；
}
#钮扣{
位置：相对位置；
}

信息A
文本1
信息B
文本2
信息C
文本3





单击
您的意思是单击“单击”按钮时如何保持相同的布局？您的意思是不调整第一个按钮的大小，尽管它的内容将被点重载？我希望大小和位置都不会改变。无论有多少文本在OK中，你都应该真正编辑问题，以明确这一点，这样其他人就不会对你是什么感到困惑asking@Huangism我已经删除了我的第一个答案。需要多一点，因为它仍然发生，可能需要断字。第二个和第三个单元格的大小仍然相同。第一个单元正在扩展，容器也在扩展。你可以在容器上设置一个最大宽度来避免这种情况。看起来这种变化仍然在发生。我不希望任何元素移动。是的，我们可以通过向每个单元格添加
max width:33%
来解决这个问题，但这首先破坏了使用flexbox的好处。如果您不希望单元格根据其内容“调整”其大小，那么我认为flexbox对您来说是错误的解决方案。@Jonas0000您需要添加
word break:break all
@Jonas0000这是你的选择，但是如果你使用
文本溢出：省略号