Работа с высотой углового компонента внутри гибкого контейнера

Question

Я хотел бы создать простой компонент табуляции со следующими требованиями:

• Это должно занять 100% высоты его родительского контейнера
• Каждая панель / вкладка имеет заголовок с кнопкой, чтобы свернуть / развернуть ее, и содержимое, которое содержит компонент древовидной структуры и должно занимать все оставшееся пространство панели
• Если я сверну панель, развернутые должны вырасти пропорционально

Я подготовил пример на Stackblitz:

https://stackblitz.com/edit/angular-4pgdbj?embed=1&file=src/app/app.component.html

Проблема, с которой я столкнулся, состоит в том, что компоненты дерева, которые находятся внутри панелей, не принимают всю высоту, потому что родительский элемент - это гибкий div. Я довольно новичок в гибких правилах CSS, и я хотел бы знать, есть ли способ довести высоту до 100% в этом случае.

Спасибо!

Answer 1

Вы должны установить display: flex; и flex-direction: column; для контейнеров с предметами.в противном случае flex: 1 на дереве приложений не имеет никакого эффекта, потому что он не находится в гибком контейнере.когда они становятся гибкими контейнерами с разметкой столбцов, элементы дерева приложений занимают оставшееся пространство.

здесь приведена рабочая демонстрация, основанная на демонстрации stackblitz выше.

https://stackblitz.com/edit/angular-tqnxub

Answer 2

В итоге я не смог заставить его работать на 100% так, как мне было нужно, с Flexbox, поэтому я решил создать простой пользовательский аккордеонный компонент, который вычисляет высоту панелей в соответствии с их свернутым / развернутым состоянием. Затем, обрабатывая событие изменения размера окна, я пересчитываю эти высоты всякий раз, когда происходит изменение.

Спасибо за все предложения!

Answer 3

В этом случае не уверены, зачем вам Flexbox? Как div с дисплеем Flex, только один ребенок? Если вы установите высоту 100% для div с гибким дисплеем, удалите гибкий дисплей и еще 100% для div внутри дерева приложений, это решит вашу проблему.

Итак, соответствующий код:

<div style="height: 100%" [ngStyle]="{ 'display': tabsExpanded[0] ? 'block' : 'none' }">
    <app-tree></app-tree>
</div>

и

<div style="background: #fca; height: 100%">
  <ul>
    <li>Sample li</li>
    <li>Second sample</li>
    <li>Third!</li>
  </ul>
</div>