Question

有可能获得以下DIV s递归定位的杰作

使用以下代码。

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 s的任意嵌套？

或者当递归嵌套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>

失败。使用统一的框在外框上添加边框会使框超出范围。

说明

解决我遇到的问题的老师很有价值。一位（也）指出我的知识如何误导我的老师非常宝贵。目前有四个（不错且正确的）答案，但Temani Afif的评论中提供了对我误解的见解。让我用一个图表来说明它。

我的错误是想当将box-sizing更改为默认值content-box并改为指定box-sizing: border-box;时，框计算将包括全部四个内容，填充，边框和边距。顾名思义，box-sizing: border-box;在计算中包括边框。它不包括边距。

Answer 1

您可以依靠flexbox和默认的拉伸对齐方式来执行此操作，而无需指定高度或宽度或框大小：

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>

Answer 2

从所有元素中删除if answer['field']['id'] == form_fields["name"]: ...，将边距替换为填充，并删除多余的flex规则：

ratings = [("name","A"),("bio","B"),("interests","C")]
result  = next((r for f,r in ratings if answer['field']['id']==form_fields[f]),"D")

width: 100%

Answer 3

您有问题的规则是margin，因为无论您将box-sizing设置为border-box，box模型中元素的尺寸都不会包含边距，它基本上是“外部” -间距”。您也不需要所需的flexbox规则！但是当然，您需要某种间距才能达到理想的效果，因此，我选择创建一个将接收边框的伪元素，使其完全适合父对象的尺寸，并为父对象提供双边框宽度的填充模仿您之前的间距：

html, body {
    width: 100%; height: 100%; margin: 0;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.one-box-to-rule-them {
    height: 100%;
    padding: 20px;
    position: relative
}
.one-box-to-rule-them:before {
    border: 10px solid gray; border-radius: 10px;
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}

<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>

编辑：@Ori Drori解决方案更干净，但使用两种方法，我的仅使用一种，但使用的是“丑陋的” CSS（在我看来）= D

编辑：@Temani Afif应该是公认的解决方案！

Answer 4

这是您想要的吗？
如果我正确理解的话，宽度仅100％的问题
像这样：

html, body { height: 100%; margin: 0; }
.outer {
    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>

带边框的递归DIV：基本情况

4 个答案: