html - 如何仅使一个 flex 元素拉伸(stretch)而其他 flex 元素被限制以保持其自然高度？

Question

我希望除最后一个之外的所有 flex 元素都只占据它们的正常高度，最后一个 flex 元素占据 flex 盒的剩余高度(拉伸(stretch))。但我无法做到这一点。

以下是我一直在尝试的:

  .parent {
        display: flex;
        flex-wrap: wrap;
        /*align-content: start;*/
        border: 1px solid green;
        height: 50vh
    }

    .child-height-auto {
        align-self: start;
        border: 1px solid red;
        width: 100%;
    }

    .child-height-strech {
        align-self: stretch;
        border: 1px solid blue;
        width: 100%;
    }

<div class="parent">
    <div class="child-height-auto">I should occupy my normal height</div>
    <div class="child-height-auto">I should occupy my normal height</div>
    <div class="child-height-strech">I should occupy remaining height of the flexbox</div>
</div>

Answer 1

将 flex 的方向设置为 column并将 flex-grow 属性添加到最后一个元素。

  .parent {
        display: flex;
        flex-wrap: wrap;
        /*align-content: start;*/
        border: 1px solid green;
        height: 50vh;
        flex-direction: column;
    }

    .child-height-auto {
        align-self: start;
        border: 1px solid red;
        width: 100%;
    }

    .child-height-strech {
        align-self: stretch;
        border: 1px solid blue;
        width: 100%;
        flex-grow: 1;
    }

<div class="parent">
    <div class="child-height-auto">I should occupy my normal height</div>
    <div class="child-height-auto">I should occupy my normal height</div>
    <div class="child-height-strech">I should occupy remaining height of the flexbox</div>
</div>