设置flex:1 1 50vw的两个Flex容器宽度不一致问题求助

这种Flex子容器宽度不一致的情况，大多是盒模型、默认样式或内容溢出导致的，下面是几个针对性的解决办法：

1. 统一盒模型计算规则 #

浏览器默认的content-box盒模型中，元素的宽度不包含内边距（padding）和边框（border）。如果你的两个子容器有不同的padding/border，或者父容器的盒模型没设置好，就会导致实际占据的空间不一致。

给所有相关元素设置border-box，让宽度计算包含padding和border：

.parent-container, .flex-item {
  box-sizing: border-box;
}
.flex-item {
  flex: 1 1 50%;
}

2. 清除默认内外边距 #

部分HTML元素（比如段落、列表）自带默认的margin或padding，可能导致某个子容器的实际尺寸被撑开。统一重置子元素的内外边距：

.flex-item {
  margin: 0;
  padding: 0;
  flex: 1 1 50%;
  box-sizing: border-box;
}

3. 检查父容器的Flex配置 #

确保父容器设置了display: flex，并且不要添加justify-content: space-between这类会额外分配空间的属性（除非你明确需要间隙）。如果父容器自身有padding，同样要给父容器加box-sizing: border-box，避免可用宽度被压缩。

4. 处理内容溢出问题 #

如果其中一个子容器里有长文本、大图片这类未做限制的内容，可能会强行撑开容器，导致另一个被压缩。给子容器添加溢出控制：

.flex-item {
  flex: 1 1 50%;
  box-sizing: border-box;
  overflow: hidden; /* 超出部分隐藏 */
}
/* 针对文本内容 */
.flex-item p {
  word-break: break-all;
}
/* 针对图片 */
.flex-item img {
  max-width: 100%;
  height: auto;
}

5. 改用Grid布局（终极方案） #

如果Flex布局的细微偏差始终无法解决，可以改用Grid布局，它在平分宽度的场景下表现更稳定：

.parent-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 如果不需要间隙，设置gap: 0; */
}

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