设置百分比宽度的元素时，浏览器如何计算其父元素宽度？

Question

在进行CSS工作时，我有两种理解来计算元素的宽度。

1. 当元素显示为行内块且未设置宽度时，其宽度将基于子元素的宽度。
2. 当元素将宽度设置为百分比时，其宽度将基于父元素。

如果显示内联块元素的子级的宽度设置为百分比。基于以上两种理解，子元素的宽度将基于其父元素，同时，父元素的宽度也将基于其子元素。在这种情况下，浏览器如何计算父/子元素的宽度？

我在下面写一个简单的例子：

<h1>child element without percentage width</h1> 
<button>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quos repellat dignissimos distinctio ut odio voluptatibus, aliquam unde quis culpa quas voluptatem id eveniet dicta consequuntur enim reprehenderit sit fugit? lorem
    </div>
  </button>  

<h1>child element with percentage width</h1> 
<button>
    <div style="width: 20%">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quos repellat dignissimos distinctio ut odio voluptatibus, aliquam unde quis culpa quas voluptatem id eveniet dicta consequuntur enim reprehenderit sit fugit? lorem
    </div>
  </button>

结果表明我的最初理解是错误的。谁能帮助解释浏览器如何精确计算父元素宽度？