CSS布局异常：div内文本到边界不换行反而撑宽父容器求助

• 浮动元素无宽度约束：当前.menu下的两个子级都设置了左浮动，浮动元素脱离常规文档流后，没有预先设置固定宽度/占比，宽度完全由内部最长的内容撑开，直接给长文本创造了“无边界”的展开空间，从根源上消除了换行触发的条件。
• 文本容器缺少换行属性配置：原来给.h-tertiary设置的overflow: auto，在父容器宽度被内容撑开的场景下无法起到约束文本的作用，既不会限制宽度，也不会触发自动换行。
• 块级元素高度塌陷：每个承载左右浮动按钮的.block容器没有做浮动清理，会进一步影响父级容器的宽度、高度计算逻辑，放大布局错位的问题。

按顺序调整CSS规则即可：

1. 给根容器加宽度限制，划分左右模块的固定占比，避免容器随内容膨胀

   .menu {
       display: block;
       overflow: hidden;
       /* 限定整个菜单组件不超出父级视口宽度 */
       max-width: 100%;
   }
   /* 左侧菜单模块设置固定宽度占比 */
   .menu > .float-left:first-child {
       float: left;
       width: 60%;
       box-sizing: border-box;
   }
   /* 右侧存在长文本的模块设置固定宽度占比 */
   .section-two {
       float: left;
       width: 40%;
       padding-left: 2em;
       box-sizing: border-box;
   }
   

2. 替换文本容器的无效属性，加上自动换行规则

   .h-tertiary {
       margin-top: 0.25em;
       margin-bottom: 0;
       /* 移除原有的overflow: auto，替换为强制换行规则 */
       overflow-wrap: break-word;
       word-break: break-word;
       /* 可选：如果长文本需要控制展示高度，可补充溢出滚动配置 */
       max-height: 3em;
       overflow-y: auto;
   }
   

3. 给内部块级容器补充浮动清理，解决高度塌陷问题

   .block {
       padding: 0.5em;
       /* 清除内部左右浮动带来的高度塌陷 */
       overflow: hidden;
   }
   

调整完成后，右侧模块的可用宽度会被固定在父容器的40%范围内，长文本到达容器边界时会正常触发换行，不会再向外撑开父级宽度，彻底解决布局错位问题。

内容的提问来源于stack exchange，提问作者Adam Lau