Дочерний элемент flex-элемента не принимает высоту родителя, если родительский элемент имеет основание flex-base в контейнере flex столбца направления

Question

Мальчик этот титул был полным ртом. Позвольте мне объяснить мою путаницу:

У меня есть флекс-контейнер и 2 флекс-элемента.

<!-- HTML -->

<div class="container">
    <div class="item-1">
        <div class="child-of-item-1"></div>
    </div>
    <div class="item-2></div>
</div>


/* CSS */

.container {
    display: flex;
}

.item-1 {
    flex: 0 0 255px;
}

.item-2 {
   /* negligible css */
}

.child-of-item-1 {
    height: 100%; // shouldn't this always receive the height of its parent?
}

item-1 устанавливается с flex-basis из 255px используя стенографию flex имущество. Так как я не указал flex-direction на .containerпо умолчанию row, Просто. Отлично.

Теперь при определенной ширине экрана, скажем, 992pxЯ переключаю flex-direction в столбец.

@media (max-width: 992px) {
    .container {
        flex-direction: column;
    }
}

Здесь мой вопрос. Однажды <992px, .item-1 по-прежнему имеет высоту 255 пикселей, но .child-of-item-1 теряет свою высоту полностью. Где я ошибся? Что мне не хватает?

Может быть важно отметить, что .child-of-item-1 не имеет содержимого внутри него, но у него есть background-image, Я не вижу background-image так как .child-of-item-1 теряет свою высоту, отсюда и мое замешательство.

Я был бы очень признателен, и еще раз спасибо!:)

Answer 1

Ну, это заняло всего 2 минуты, прежде чем обнаружить проблему. Родитель .container был min-heightи, следовательно, всегда будет иметь высоту. Это не так важно, когда flex-direction установлен в column, но когда установлено row, flex-контейнер имеет высоту. Удаление этого min-height из уравнения, .item-1у кого есть flex-basis из 255px, все равно не имеет высоты. НО, .item-2 может иметь высоту, основанную на его содержании. В моем случае это так. Удаление .item-2 из уравнения показывает, что .item-1 никогда не устанавливал высоту вообще, он просто получал ее от других элементов. Однажды я переключил flex-direction: column, правда вышла!

Надеюсь, это поможет:)