子元素设置百分比padding后按钮未拉伸、文本溢出，如何解决？

当子元素使用百分比单位的padding时，按钮无法拉伸且文本溢出，核心原因是button作为表单控件，默认布局规则和普通块级元素不同：百分比padding是基于父元素（button）的宽度计算的，但button默认不会自动根据子元素的总宽度（文本+padding）扩展自身宽度，即使设置了min-width也只会维持这个最小尺寸，最终导致内容溢出。

解决方案 #

方案1：让按钮自适应内容宽度

给button添加width: fit-content，同时保留min-width确保最小尺寸，这样按钮会根据子元素的实际宽度自动拉伸：

<button style="min-width: 150px; height: 63px; width: fit-content;">
    <div style="padding-left: 70%;">something</div>
</button>

方案2：使用Flex布局

给button设置display: flex，改变内部布局上下文，让子元素的padding被正确计算，按钮也会自动适配内容宽度：

<button style="min-width: 150px; height: 63px; display: flex;">
    <div style="padding-left: 70%;">something</div>
</button>

方案3：替换百分比padding（可选）

如果不需要严格的百分比间距，可以改用固定像素值（如padding-left: 105px，对应150px的70%）或视口单位，避免依赖父元素宽度计算：

<button style="min-width: 150px; height: 63px;">
    <div style="padding-left: 105px;">something</div>
</button>

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