两个textarea并排布局疑问：flex下50%宽度适配原因及规范实现

为什么flex布局下width:50%正常，普通流中会超出？ #

这核心源于两个差异：

• 盒模型计算逻辑：textarea属于替换元素，浏览器默认给它设置了padding和border，且默认采用box-sizing: content-box——你设置的width:50%仅指代内容区域的宽度，加上padding和border后，元素总宽度会超过父容器的50%，两个textarea叠加后自然会超出窗口范围，导致换行或横向滚动。
• flex布局的自适应机制：当body设为display:flex时，textarea作为flex项目，默认拥有flex-shrink:1属性。该属性会让flex项目在总宽度超出容器时自动收缩，抵消padding和border带来的额外宽度，最终刚好填满容器的50%宽度。同时flex布局默认的align-items:stretch还会让textarea自动拉伸，填满容器的高度（前提是body高度被正确设置为窗口高度）。

当前实现是否规范？有没有更合适的方式？ #

你的基础实现符合CSS规范，但缺少对浏览器默认样式的处理，存在高度不足、潜在横向滚动等问题。以下是更完善的规范方案和替代实现：

优化后的flex规范方案 #

补充全局样式重置，统一盒模型计算方式，确保布局完全适配窗口：

/* 重置全局样式，统一盒模型 */
html, body {
  height: 100vh;
  margin: 0;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  display: flex;
}

textarea {
  width: 50%;
  /* 可选自定义样式：调整边框、内边距、禁止拖动 */
  border: 1px solid #ddd;
  padding: 10px;
  resize: none;
}

更直观的Grid布局方案 #

Grid布局天生适配等分列场景，代码更简洁，无需依赖flex的收缩机制：

html, body {
  height: 100vh;
  margin: 0;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  display: grid;
  /* 直接定义两列等分 */
  grid-template-columns: 1fr 1fr;
}

textarea {
  height: 100%;
  border: 1px solid #ddd;
  padding: 10px;
  resize: none;
}

普通流实现方案（不推荐） #

若必须使用普通流，需处理inline-block的空白间隙和盒模型问题：

html, body {
  height: 100vh;
  margin: 0;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-size: 0; /* 消除inline-block元素间的空白间隙 */
}

textarea {
  display: inline-block;
  width: 50%;
  height: 100%;
  font-size: 16px; /* 恢复默认字体大小 */
  border: 1px solid #ddd;
  padding: 10px;
  resize: none;
}

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