Html 他的flexbox外的按钮

你好，两天之内我掉了一半头发，对不起我的英语：）

如果调整窗口的大小，#标题中的按钮将超出其容器的范围

代码如下：

#根{
背景：灰色；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
#标题{
背景：红色；
自对齐：拉伸；/*填入主轴*/
弹性：0 0 65px；/*固定高度*/
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：10px；
}

普乌乌乌乌乌乌乌乌乌乌乌乌乌乌乌什
再见。

简单地说，没有问题，这是一个合乎逻辑的结果，除非您决定希望在较小的屏幕中得到什么，然后这就是您将得到的结果，原因是您有一个带有长“一个单词文本”的按钮，解决方案只是包装文本本身，这就是您的做法：

overflow-wrap: break-word;

或

以下是总体结果：

#根{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
背景：灰色；
溢出：隐藏；
}
#标题{
自我调整：伸展；
flex:065px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景：红色；
填充：10px；
}
.btn{
宽度：50vw；
/*这些在技术上是相同的，但同时使用*/
溢出包装：断开单词；
单词包装：打断单词；
}

普乌乌乌乌乌乌乌乌什
再见。

柔性包裹：包裹？这与预期不符，#根宽度不等于其内容。不是根而是头“按”按钮仍在容器外部。我不想包装我的内容#标题。我将改变我的问题，这个想法得到了与#root{…min width:min content}相同的结果，没有这个值，因为这仍然是实验性的。可能重复谢谢，这澄清了我遇到的问题
word-wrap: break-word;