Angular FlexLayout - 子 div 在扩展父 div答案

【问题标题】：Angular FlexLayout - Child Div over extends parent divAngular FlexLayout - 子 div 在扩展父 div
【发布时间】：2021-04-03 23:43:35
【问题描述】：

我有一个 Ng FlexLayout，并且子 div 超出了父 div。

我需要它保持在父div的最大高度内，如果高度大于父div，则显示滚动条。

我似乎无法让它与 Ng FlexLayout 一起使用 :-(

我有一个超级简单的 plunkr here。如您所见，消息（包装在自己的父 div 中）延伸到绿色父 div 之外。

html

<div id="console" fxLayout="column" fxLayoutAlign="start start">
  <div
    id="console_toolbar"
    fxLayoutAlign="start start"
    fxLayout="row"
    fxFill
  >
    <div class="label_text">Display:</div>
    <div class="con_msg_cb">Test</div>
  </div>
  <div id="console_output" fxLayout="row" fxFill>
    <div id="console_msg_wrapper" fxLayout="column" fxFill>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
      <div class="cm">message</div>
    </div>
  </div>
</div>

css

#console {

  background-color: green;
}

div#console_toolbar {
  min-height: 30px;
  width: 100%;

  background-color: blue;
}
div#console_output{
  height: 200px;
}
div#console_msg_wrapper{
  height: 100%;
  // overflow: hidden;
}

【问题讨论】：

使用overflow: scroll
谢谢，辛苦了！如果您将答案作为解决方案发布，我会接受！

标签： css angular angular-flex-layout

【解决方案1】：

当您的内容尺寸超过容器元素的尺寸时，您应该使用overflow: scroll，这将确保您的内容在滚动时可见。

使用overflow: hidden会导致溢出的内容被隐藏。

【讨论】：