如何创建适配内容宽度且可扩展的内层div？

我有一个固定宽度的外层div，内部包含一个内层div。内层div中可能是固定尺寸的button，也可能是宽度设为100%的div。请问能否实现内层div在容纳button时适配其宽度，在容纳全屏div时占满外层div的宽度？我尝试了width、minWidth、maxWidth以及一些flex属性的组合，但均未达到预期效果。

相关代码示例：
当内层包含button时：

<div style="width:500px">
  <div style="??">
    <button>Button</button>
  </div>
</div>

当内层包含全屏div时：

<div style="width:500px">
  <div style="??">
    <div style="width:100%"></div>
  </div>
</div>

给内层div设置以下样式即可实现需求：

width: fit-content;
max-width: 100%;

原理说明 #

• width: fit-content：让内层div的宽度自动贴合子元素（比如button）的实际宽度，不会多余拉伸。
• max-width: 100%：限制内层div的最大宽度为外层div的100%（也就是500px），当子元素是设置了width:100%的div时，这个子元素会把内层div撑开至最大允许宽度，刚好占满外层。

兼容旧版浏览器的替代方案

如果需要兼容不支持fit-content的浏览器（比如IE），可以用以下样式：

display: table;
width: 100%;

display: table会让元素宽度适配子内容，同时width:100%确保子元素需要占满宽度时能撑满外层容器。

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