Angular: Flexbox не будет заполнять экран - PullRequest
Новая
       37

Angular: Flexbox не будет заполнять экран

0 голосов
/ 08 апреля 2020

Я хотел бы понять, как Angular интерпретирует мой код HTML и CSS. Макеты, которые я использовал без Angular, похоже, ломаются.

Простой пример: я пытаюсь создать div заголовка с фиксированной высотой, за которым следует div тела, который заполняет оставшееся пространство.

Работает в ванильном HTML / CSS: https://jsfiddle.net/d4Lmbk2q/1/

HTML: 

<div id='mainCont'></div>
<div id='bodyCont'></div>

CSS: 

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-flow: column;
    align-items: stretch;
}

#mainCont {
    background-color: blue;
    flex: 0 0 1.8cm;
    min-width: 970px;
}

#bodyCont {
    background-color: green;
    flex: 1 1 auto;
}

В Angular ничего не отображается (предположительно, потому что Angular вставляет пустой элемент-обертку компонента app- root между flex-контейнером и flex-элементами?): https://codesandbox.io/s/beautiful-pike-u7hbl?file= / src / app / app.component. css

1 Ответ

0 голосов
/ 08 апреля 2020

Да, дисплей: flex применяется к прямым потомкам элемента body, которые в данном случае являются не вашими div, а тегом app- root

...