如何让Button自动适配其父级Div的宽度？

针对你遇到的子元素Button无法自动适配父级Div宽度的问题，下面是几种简单直接的解决方式：

方法1：设置宽度100%并调整盒模型 #

给子按钮添加CSS样式，直接让宽度占满父容器，同时避免内边距/边框导致溢出：

.drp-btn-elem {
  width: 100%;
  box-sizing: border-box; /* 确保padding、border不会超出父容器宽度 */
}

方法2：使用Flex布局 #

给父容器.drp-content启用flex布局，让子按钮自动填充可用空间：

.drp-content {
  display: flex;
  flex-direction: column; /* 保持按钮垂直排列 */
}
.drp-btn-elem {
  flex: 1; /* 让按钮自动占满父容器宽度 */
}

方法3：使用Grid布局 #

通过Grid布局让子按钮默认占满父容器列宽：

.drp-content {
  display: grid;
}
.drp-btn-elem {
  width: 100%; /* 可选，Grid默认会让子元素占满列宽，添加后兼容性更好 */
}

如果需要顶部的.drp-btn和下拉按钮宽度一致，也可以给.drp-btn套用上述任意一种适配方式。

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