Угловой: Не удается найти два p-col-6 рядом в PrimeNG FlexGrid

Question

Я использую Flex Grid в моем проекте Angular7, но, хотя в первой ситуации поведение нормальное, и я могу найти два p-col-6 рядом, я не могу сделать их рядом после перемещая их в p-col-12. Вот проблема:

# статус 1:

<style>
    .p-grid {
        border: 2px solid red;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .p-col-6 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 50%; 
        margin-bottom: 5px;
        max-width: 50%;
    }
</style>

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

    <div class="p-col-6">
    </div>

    <div class="p-col-6">
    </div>

    <div class="p-col-6">
    </div>
</div>

Здесь нет проблем. Но при использовании этого, как показано ниже, возникает проблема:

# статус 2:

<style>
    * {
        -webkit-box-sizing: border-box;
    }

    .p-grid {
        border: 2px solid red;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .p-col-6 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 50%; 
        margin-bottom: 5px;
        max-width: 50%;
    }

    .p-col-12 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 100%;
        margin-bottom: 5px;
        max-width: 100%;
    }
</style>

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

    </div>

    <div class="p-col-12">
        <div class="p-col-12">12</div>
    </div>

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

Но нельзя сделать col-6 рядом, даже если измените свойства ширины. Любая идея?

Answer 1

Проблема заключается в том, что добавленная вами вложенность приводит к тому, что .p-col-6 больше не является дочерним элементом родительского элемента flexbox, .p-grid.Вместо этого .p-col-6 является элементом уровня блока и не будет выравниваться бок о бок, как обычные дочерние строки с изменением направления.

<div class="p-grid">                   /* <-- flexbox  parent */
    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-12">12</div>
    </div>

    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-6">          /* <-- NOT a flexbox child */
            6
        </div>
        …
    </div>
</div>