使弹性容器受窗口高度限制

Question

我正在尝试制作一个占据整个窗口并使用其自己的内部滚动机制的网络应用程序。我不希望任何内容出现在浏览器窗口之外。

现在我正在尝试使用包含 flex 容器的布局，设置为 flex 列，具有固定的标题导航栏，然后是显示动态数据的内容区域，该区域将具有滚动条来查看内容溢出。这样第二个标题将始终在页面上。我正在使用 Angular 来执行此操作，并且因为被路由的组件在标题和内容 divs 之前向 DOM 添加了另一个级别，因此 flex 容器不会限制它们的高度。

.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 在添加项目超出其底部边界时不调整大小，而是切断任何溢出并显示滚动条以到达其余的内容。这样，当用户向下滚动页面时，SubHeader div 和主 Head div 将始终显示在屏幕上。

angular-router-endpoint 和 angular-routed-component divs 正如它们的类所描述的那样，是一个 Angular Router-Outlet 和一个由 Outlet 插入的自定义 Angular 组件。据我所知，该组件不能直接设置样式。

Answer 1

我试图了解预期的结果。

在您的代码中，您使用了 flexbox，但忘记了包装器 .angular-routed-component，并且您从这里失去了 flex 模型的好处。

我已删除并更新了一些值。 （没有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 问题，而是我误解了 Angular 路由器构建 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>