Html Flex不会像示例中所示那样插入

我只想使用下面的代码在上使用一个嵌套flex的修改示例：

<h3>Nested</h3>
<div class="p-grid nested-grid">
    <div class="p-col-8">
        <div class="p-grid">
            <div class="p-col-6">
                <div class="box">6</div>
            </div>
            <div class="p-col-6">
                <div class="box">6</div>
            </div>
            <div class="p-col-12">
                <div class="box">12</div>
            </div>
        </div>
    </div>
    <div class="p-col-4">
        <div class="box box-stretched">4</div>
    </div>
</div>

嵌套
6.
6.
12
4.

---

但是，col div的作用是总大小不是12，而是11，如果p-col总数是12或更多，元素将换行到我不想要的下一行。另一方面，我看了所有的主分区和身体垫和边缘，但没有问题。我认为p-cols的填充物不会导致这个问题，它们的填充物也在0-5像素范围内。你知道如何解决这个问题吗？

网站上的例子就是这样的

我认为您不需要“p网格嵌套网格”

<div class="p-grid">
<div class="p-col-8">
    <div class="p-grid">
        <div class="p-col-6">
            6
        </div>
        <div class="p-col-6">
            6
        </div>
        <div class="p-col-12">
            12
        </div>
    </div>
</div>
<div class="p-col-4">
    4
</div>

6.
6.
12
4.

---

删除第一个

div

元素中的

嵌套网格

类，如示例所示，不需要它

<div class="p-grid">
    <div class="p-col-8">
        <div class="p-grid">
            <div class="p-col-6">
                6
            </div>
            <div class="p-col-6">
                6
            </div>
            <div class="p-col-12">
                12
            </div>
        </div>
    </div>
    <div class="p-col-4">
        4
    </div>
</div>

6.
6.
12
4.

要在第一个

div

元素中保留

嵌套网格

类，可以将以下内容添加到global styles.css文件中进行修复

* {
  -webkit-box-sizing: border-box;
}

---

这将阻止col Div表现得好像总大小是11而不是12，并适用于primefaces网站上显示的所有示例

寻求代码帮助的问题必须包含在问题本身中重现所需的最短代码，最好是在。请参阅“谢谢”，但它没有任何意义：（这没关系。实际上，这是我在stackoverflow.BTW中的第一个答案，如果您不希望元素移动到下一行，可以尝试在内部p网格中添加“flex wrap:nowrap”属性