如何让React组件中.lower-display容器随内容动态增高并解决横向溢出？

你的问题核心在于flex布局默认的单行特性，以及无空格长文本的换行规则限制——单独使用word-wrap: break-word在flex容器里无法触发预期的换行效果，需要配合以下调整：

具体修改方案 #

直接调整.lower-display的CSS样式，添加关键属性即可解决：

.lower-display{
    min-height: 35px;
    padding-right: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; /* 多行时每行底部对齐，贴合计算器类组件的显示逻辑 */
    flex-wrap: wrap; /* 允许内容换行，是容器垂直增高的核心开关 */
    word-break: break-all; /* 强制无空格文本（如长数字、连续符号）换行 */
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 24px;
}

关键属性作用说明 #

• flex-wrap: wrap：打破flex默认的单行布局规则，当内容超出容器宽度时自动换行，让容器能根据内容行数动态增高。
• word-break: break-all：针对无空格的连续字符（比如超长计算式、数字串）强制拆分换行，比word-wrap: break-word的适配性更强，完全覆盖计算器场景的文本换行需求。
• align-items: flex-end：如果是多行内容，让每一行都靠容器底部对齐，更符合传统计算器的视觉习惯；若需要多行整体垂直居中，可保留align-items: center，同时添加align-content: flex-start避免容器高度异常。

额外验证点 #

确认父容器.display没有开启overflow: hidden（你已注释该属性，无需改动），且.display的width:100%是基于有明确宽度的父元素（确保容器宽度不会无限延伸）。

你的React组件代码本身无问题，仅需调整CSS即可实现需求。

内容的提问来源于stack exchange，提问作者Satyam Rai