为何max-width设置不生效？固定定位弹窗宽度异常求助

你的问题出在固定定位的居中方式上：当前用right: 50% + transform: translate(50%)实现居中时，元素的可用宽度被限制在屏幕的左半区域（从左边缘到屏幕中线），所以文本会在这个范围内换行，导致你设置的max-width:100%没起作用。

修改后的CSS代码 #

.newalertbox {
  position: fixed;
  bottom: 30px;
  /* 替换原有的right和transform，改用左右0+margin:auto实现水平居中 */
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: rgba(0, 255, 255, 0.8);
  padding: 5px;
  border-radius: 5px;
  z-index: 1001;
  box-sizing: border-box;
  font-weight: bold;
  max-width: 100%;
  width: auto;
  /* 移除无效的align-items（这是flex容器属性，当前不是flex） */
  text-align: center;
  font-size: 12px;
}

关键改动说明 #

• 移除right:50%和transform: translate(50%)，改用left:0; right:0; margin:0 auto;：这种方式让固定定位元素在水平方向上可以利用整个屏幕的可用宽度，同时保持居中，max-width会正常生效。
• 删掉align-items: center：这个属性只有在元素是flex容器时才有效，当前元素不是flex布局，所以该属性无效。
• 保留width:auto和max-width:100%：确保容器宽度随文本内容自适应，直到达到屏幕最大宽度后自动换行。

这样修改后，容器会在屏幕底部中央居中，文本会自由延伸，直到占满屏幕宽度时才会自动换行。

内容的提问来源于stack exchange，提问作者Scott Reigle