Сделать контейнер Flex ограниченным по высоте окна

Question

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

Сейчас я пытаюсь использовать макет, который включает в себя гибкий контейнер, настроенный для гибких столбцов, который имеет фиксированную панель навигации заголовка, а затем область содержимого, в которой будут отображаться динамические данные, и будет иметь полосу прокрутки для просмотра переполнения содержимого. Таким образом, второй заголовок всегда будет на странице. Я использую Angular для этого, и поскольку маршрутизируемый компонент добавляет еще один уровень в DOM перед заголовком и содержимым div s, гибкий контейнер не ограничивает их высоту.

.page {
  display: flex;
  flex-flow: column;
  height: 100%;
  max-height: 100vh;
}

.header {
  flex: 1 1 50px;
  border: 3px solid red;
}

.container {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  padding: 20px;
}

.dynamic-content {
  flex: 1 1 auto;
  border: 3px solid blue;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
}

.item {
  font-size: 40px;
}

<div class='page'>

  <div class="header">
    Head
  </div>
  
  <div class="container">
    
    <app-component _nghost class="ng-star-inserted">
      <div class="header">SubHeader</div>
    
      <div class='dynamic-content'>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>      
      </div>
    </app-component>
  
    
    
  </div>

Я хочу, чтобы div.container занимал только оставшуюся высоту страницы, а div.dynamic-content не изменял размер при добавлении элементов за нижнюю границу, а вместо этого обрезал любое переполнение и отображал полосу прокрутки, чтобы добраться до остальное содержимое. Таким образом, как вспомогательный заголовок div, так и основная головка div всегда будут отображаться на экране, когда пользователь прокручивает страницу вниз.

angular-router-endpoint и angular-routed-component div s, как их классы описывают, - угловой угловой маршрутизатор-выход и пользовательский угловой компонент, вставляемый торговой точкой. Насколько мне известно, компонент не может быть стилизован напрямую.

Answer 1

Я пытался понять ожидаемый результат.

В своем коде вы добавляете флексбоксы, , но забываете обертку .angular-routed-component, и вы теряете здесь преимущества гибкой модели.

Я удалил и обновил некоторые значения. (нет max-height, но только height и flex уменьшите до одного значения, достаточного для заполнения оставшегося пространства. (flex:1;) , добавлено также немного overflow:hidden, для запуска позже свиток)

.page {
  display: flex;
  flex-flow: column;
  height: 100vh;/* update */
  overflow:hidden;/* update */
}

body {/* update */
  margin: 0;
}

.header {
  min-height: 50px;/* update, no flex rules */
  border: 3px solid red;
}

.container, .angular-routed-component {/* here same rules for the angular child compoment */
  display: flex;
  flex: 1;/* update */
  flex-flow: column;
  padding: 20px;
  overflow:hidden;/* update */
}

.dynamic-content {
  flex: 1;/* update */
  border: 3px solid blue;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
}

.item {
  font-size: 40px;
}

<div class='page'>

  <div class="header">
    Head
  </div>

  <div class="container">

    <div class="angular-router-endpoint"></div>
    <div class="angular-routed-component">
      <div class="header">SubHeader</div>

      <div class='dynamic-content'>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
      </div>
    </div>



  </div>

Answer 2

Я решил свою проблему и обнаружил, что это не проблема CSS, а то, что я неправильно понял в том, как угловой маршрутизатор структурирует DOM.

Для вставленного тега компонента должно быть установлено display: flex. Чтобы добавить стили непосредственно к тегу компонента, используйте селектор CSS: :host, и в моем случае мне пришлось использовать :host { display: flex }, чтобы заставить его работать правильно.

Я задал свой первоначальный вопрос, думая, что проблема связана с моим CSS, и отредактировал его так, чтобы он соответствовал моей конкретной проблеме

Answer 3

Я не уверен, правильно ли я вас понял, но, думаю, у меня было и ниже вы можете увидеть решение вашей проблемы.

ключевая часть

Ключевым моментом здесь является добавление height: 100vh к .page, чтобы оно не увеличивалось с высоты точки обзора.

.page {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

Отрывок

body {
  margin: 0;
}

.page {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

.header {
  flex: 1 1 50px;
  border: 3px solid red;
}

.container {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  padding: 20px;
  box-sizing: border-box;
}

.dynamic-content {
  flex: 1 1 auto;
  border: 3px solid blue;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
}

.item {
  font-size: 40px;
}

<div class='page'>

  <div class="header">
    Head
  </div>

  <div class="container">

    <div class="header">SubHeader</div>

    <div class='dynamic-content'>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
    </div>

  </div>

</div>