CSS/SASS多元素容器窗口缩放时布局错乱如何修复

• 布局大量依赖float属性但未做浮动清除，同时父容器、各子行全部设置了固定像素高度：窗口缩窄时文本自动换行占用高度增加，固定高度无法容纳溢出的内容，就会出现元素错位、跑出容器的问题
• HTML存在语法瑕疵：多个class属性值未加引号，元素嵌套层级冗余，会进一步干扰浏览器的正常布局渲染
• 底部操作区的Yes/No按钮使用右浮动，未设置宽度约束，空间不足时浮动元素会脱离预期排列位置

修正后的HTML #

<div class="containerRebalance">
  <div class="firstTittleRow1">
    <div class="iconwarning">
      <mat-icon [ngStyle]="{'color':'#f06f0f'}">warning</mat-icon>
    </div>
    <div class="secondTittleRow">
      <div class="textoWarning">
        Para enviar tu solicitud de modificación, es necesario
        que los porcentajes de participación por cada
        beneficiario sea mayor a cero y que la suma de las
        participaciones en cada prioridad sea igual al 100% 
      </div>
    </div>
  </div>
  <div class="linetext">
    <p class="texto1">
      ¿Desea repartir en partes iguales el porcentaje
      de participación de la  {{prioridad}}?
    </p>
    <div class="actionBtns">
      <div class="texto2">Yes</div>
      <div class="texto2">No</div>
    </div>
  </div>
</div>

修正了原HTML中class属性缺失引号、texto1层级重复嵌套的问题，底部两个按钮单独加了容器方便布局控制

修正后的SASS代码 #

.containerRebalance {
  min-height: 113px;
  background: #fdf6e9;
  border: 1px solid #f9ce93;
  color: #4d5966;
  font-size: 0.75rem;
  font-family: Roboto-Medium;
  padding: 0 0.9375rem 1rem;
  line-height: 17px;
  margin-top: 48px;
  box-sizing: border-box;
}

.firstTittleRow1 {
  padding-left: 10px;
  min-height: 73px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.iconwarning {
  padding-top: 20px;
  flex-shrink: 0;
}

.secondTittleRow {
  flex: 1;
  min-height: 73px;
}

.textoWarning {
  font-size: 14px;
  line-height: 18px;
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  color: rgb(96, 110, 125);
  padding-top: 20px;
  margin: 0;
}

.linetext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 34px;
  margin-top: 8px;
}

.texto1 {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  color: rgb(96, 110, 125);
  flex: 1 1 280px;
}

.actionBtns {
  display: flex;
  gap: 32px;
  flex-shrink: 0;
}

.texto2 {
  font-size: 14px;
  line-height: 21px;
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  color: rgb(96, 110, 125);
  cursor: pointer;
}

• 所有固定height属性改为min-height，内容变多时容器会自动撑开，不会出现内容溢出
• 废弃容易造成布局错乱的浮动布局，改用flex做排版，图标、提示文本、底部操作区的排列逻辑更稳定
• 底部操作区开启flex-wrap: wrap，宽度不足时按钮区域会自动换到下一行，不会和文本挤在一起错位
• 给固定尺寸元素（警告图标、按钮组）加flex-shrink: 0，避免被压缩变形
• 新增box-sizing: border-box规则，保证内边距不会撑破容器宽度

内容的提问来源于stack exchange，提问作者Felipe Roman Zegers