как сделать только один гибкий элемент растягивающимся, в то время как другие ограничены, чтобы сохранить их естественную высоту?

Question

Я хочу, чтобы все флекс-элементы, кроме последнего, занимали обычную высоту, а последний флекс-элемент занимал оставшуюся высоту флексбокса (растяжение).Но я не смог этого сделать.

Вот что я пытался сделать:

  .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

Попробуйте следующий код

.parent {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid green;
  height: 50vh;
  flex-flow: column;
}
.child-height-auto {
  align-self: start;
  border: 1px solid red;
  width: 100%;
  flex-shrink: 1;
}
.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>

Answer 2

Сначала вы должны добавить flex-direction: column; и удалить flex-wrap.Затем вы можете назначить различные параметры flex-grow вашим классам для гибких элементов (последний может расти, другие нет) - см. Ниже.

.parent {
        display: flex;
        flex-direction: column;
        border: 1px solid green;
        height: 50vh
    }

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

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

Answer 3

Установите направление изгиба на 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>