html - 带边框的递归 DIV : the base case

Question

DIV的递归定位可以得到如下杰作

使用以下代码。

html, body { width: 100%; height: 100%; margin: 0; }
.outer {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
}
.inner {
    margin: 10px;
    border: 10px solid gray; border-radius: 10px;
    display: flex; flex-direction: column;            
    flex: 1;
}

<div class="outer">
    <div class="inner">
        <div class="inner">
            <div class="inner">
            </div>
        </div>
    </div>
</div>

但有些事情很奇怪。我尝试为 outer 框显示边框失败(并且 box-sizing: border-box; 没有帮助)。

您能否修改此代码以仅对 html、body 以及 one-box 使用样式，其中 one-box 是用于 outer DIV 以及 inner DIV 的任意嵌套？

或者当递归嵌套 DIV 时，HTML5/CSS3 真的需要这种对基本情况的巴洛克式处理吗？

我的尝试:

html, body {
    width: 100%; height: 100%; margin: 0;
    box-sizing: border-box;
}
.one-box-to-rule-them {
    width: 100%; height: 100%;

    display: flex;
    flex-direction: column;
    flex: 1;

    margin: 10px;
    border: 10px solid gray; border-radius: 10px;

    box-sizing: border-box;
}

<div class="one-box-to-rule-them">
    <div class="one-box-to-rule-them">
        <div class="one-box-to-rule-them">
            <div class="one-box-to-rule-them">
            </div>
        </div>
    </div>
</div>

失败。使用统一框在外框上加边框，使框出界。

解释

解决我遇到的问题的老师很有值(value)。一位(也)指出我的知识如何误导我的老师是无价的。目前有四个(很好且正确的)答案，但 Temani Afif 的评论提供了对我误解的见解。让我用一张图来说明。

我的错误是认为，当一个人从其默认的 content-box 更改 box-sizing 并改为指定 box-sizing: border-box;，框计算包括所有四个，content，padding，border，和margin。顾名思义，box-sizing: border-box; 在计算中包含了 border-box。它不包括边距。

Answer 1

你可以依靠 flexbox 和默认的拉伸(stretch)对齐来做到这一点，而不需要指定高度或宽度或盒子大小:

body {
  height: 100vh;
  margin: 0;
  display: flex;
}

.inner{
  margin: 8px;
  border: 8px solid gray;
  border-radius: 10px;
  display: flex;
  flex-grow: 1;
}

<div class="inner">
  <div class="inner">
    <div class="inner">
      <div class="inner">
        <div class="inner">
        </div>
      </div>
    </div>
  </div>
</div>