CSS如何实现按钮随内部元素尺寸增大自动调整大小适配内容

在<button>按钮标签内部嵌套<p>段落标签与<img>图片标签，添加对应CSS样式后呈现效果如下：

当前异常表现：增加<p>标签内的文本长度时，文本会溢出按钮边界。
预期效果：内容可被完整包裹在按钮内部，按钮尺寸能随内部元素尺寸变化自动适配。

<button class="white-btn" id="btn_one" onclick="myFunction()">
  <img src="./icon1.png"/>
  <p>Bauleistungenfdssfdsfasadsf</p>
</button>

.white-btn {
  width: 20%;
  height: 151px;
  background: #ffffffb8;
  border-radius: 12px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  border: none;
}

• 按钮设置了固定高度height: 151px，高度被锁死无法随内容增加自动撑开
• flex布局未设置换行规则，内部元素默认会在同一行挤压排布
• <p>标签自带浏览器默认外边距，且未设置长文本折行规则，超长连续文本会直接突破容器边界

按以下规则调整样式即可：

• 将固定高度替换为min-height: 151px，保证内容较少时按钮保持原有最小高度，内容增多时高度自动适配
• 给按钮添加padding控制内容与边框的间距，替代固定高度的尺寸约束
• 给flex容器添加flex-wrap: wrap，允许内部图片、文本在空间不足时自动换行
• 清除<p>标签默认外边距，添加长文本折行属性，避免连续长文本横向溢出
• 可添加gap属性控制图片和文本的间距，优化展示效果

修改后的完整CSS代码：

.white-btn {
  width: 20%;
  min-height: 151px;
  padding: 1rem 0.8rem;
  background: #ffffffb8;
  border-radius: 12px;
  text-align: center;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  border: none;
  gap: 0.5rem;
  cursor: pointer;
}

.white-btn p {
  margin: 0;
  word-break: break-word;
}

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