如何不硬编码尺寸让父div与子textarea的宽高完全相等？

问题场景 #

尝试通过box-sizing: border-box让textarea占满父div的宽高，但不硬编码div尺寸时，div高度会略大于textarea，无法实现完全贴合。

核心原因 #

textarea作为表单元素默认带有外边距，同时块级父元素的默认布局会因margin折叠或自身默认间距导致尺寸不匹配；另外，父div默认的块级布局不会主动收缩到子元素的精确尺寸。

解决方案：使用Flexbox布局 #

Flexbox可以让父容器紧密包裹子元素，同时让子元素完全填充容器空间，无需硬编码任何尺寸：

HTML代码

<div>
    <textarea></textarea>
</div>

CSS代码

div {
    background: red;
    display: flex; /* 启用弹性布局 */
}

textarea {
    flex: 1; /* 让textarea占满容器可用空间 */
    box-sizing: border-box; /* 确保内边距、边框计入宽高计算 */
    margin: 0; /* 清除textarea默认外边距 */
}

补充说明 #

• display: flex让父div成为弹性容器，自动收缩到子元素的最小尺寸，同时支持子元素撑满容器；
• flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，确保textarea完全填充父容器的可用空间；
• 清除textarea的默认margin，避免额外间距导致尺寸偏差；
• box-sizing: border-box保证textarea的内边距、边框不会额外增加宽高，确保尺寸计算准确。

内容的提问来源于stack exchange，提问作者K. Claesson