为父div添加边框后父子元素/图片出现空白间隙该如何解决

1. 父容器.big-box同时设置了flex-wrap: wrap、align-items: center、justify-content: center，搭配子元素.box的flex: 1 1 33%规则，触发flex布局的尺寸计算逻辑：虽然子元素设置了min-width:100%、min-height:100%，但flex-basis的33%会优先参与计算，最终渲染时父容器content区域和子元素尺寸之间出现亚像素级的计算偏差，父容器的白色背景透出就形成了可见的空白间隙。
2. 如果替换为图片元素也出现相同问题，属于行内元素默认基线对齐的特性导致，和当前div场景的触发逻辑略有区别，但都属于布局规则的默认行为。

任选以下一种方案即可解决：

• 删除父容器.big-box多余的flex-wrap: wrap规则，同时删除子元素.box的flex: 1 1 33%、min宽高规则，直接给子元素设置width: 100%; height: 100%，让子元素直接撑满父容器的content区域。
• 如果需要保留flex弹性特性，将父容器的align-items: center改为align-items: stretch，同时删除子元素的min-height规则，让flex子元素默认拉伸撑满父容器交叉轴空间。
• 兼容所有场景的通用方案：直接将父容器的背景色改为和子元素一致的颜色，就算存在亚像素渲染偏差也不会透出不同颜色的间隙，对图片元素的同类问题也生效。

修复后代码示例 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.big-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: black; /* 和子元素同色，可选兜底设置 */
  border: 5px solid darkgreen;
  overflow: hidden;
  height: 100px;
  width: 100px;
}

.box {
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  border: none;
  overflow: hidden;
}

<div class="container">
  <div class="big-box">
    <div class="box">
      <h2>hello</h2>
    </div>
  </div>
</div>

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