使用display:flex+flex-direction:column时Firefox元素收缩的兼容问题

问题原因 #

当使用display:flex搭配flex-direction:column布局，且容器设置align-items:center时，Firefox会将flex子项的宽度收缩至内容最小宽度，忽略你设置的width属性；而Chrome会优先遵循指定的宽度值，导致两端显示不一致。

解决方案 #

方案1：用拉伸对齐+margin居中替代原对齐方式（推荐）

这种方式更符合Flex布局规范，同时用gap替代<br>实现更可控的间距：

#a-p-c {
  width: 95%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch; /* 改为拉伸对齐 */
  gap: 15px; /* 统一控制子项间距，替换<br> */
}

#logo, #title, #phone, #addphone {
  margin-left: auto;
  margin-right: auto; /* 通过margin实现水平居中 */
}

#logo {
  width: 150px;
  height: 20px;
  object-fit: cover;
  contain-intrinsic-size: 150px 20px;
}

#title {
  font-size: 18px;
  text-align: center;
  color: #333;
  font-weight: 400;
  max-width: 95%; /* 限制标题宽度，避免超出容器 */
}

#phone {
  height: 55px;
  width: 95%;
  text-indent: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

#addphone {
  height: 50px;
  width: 60%;
  border: none;
  outline: none;
  font-size: 18px;
  border-radius: 10px;
  background-color: #607D8B;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

对应的HTML（移除<br>标签）：

<div id="a-p-c">
  <img id="close" src="http://192.168.1.7/fullbx/icons/search-close.svg">
  <img id="logo" src="http://192.168.1.7/fullbx/icons/logo.png">
  <span id="title">განცხადების დასამატებლად აუცილებელია ვალიდური ტელეფონის ნომრის დამატება.</span>
  <input id="phone" type="number" placeholder="ტელეფონის ნომერი (+995)">
  <button id="addphone">დამატება</button>
</div>

方案2：阻止子项收缩

如果不想改变容器对齐方式，直接给受影响的子项添加flex-shrink:0，强制Firefox遵循设置的宽度：

#phone, #addphone {
  flex-shrink: 0;
}

内容的提问来源于stack exchange，提问作者y e n i m a l