Angular FlexLayout - 子 Div 超出父 div

Question

我有一个 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;
}

Answer 1

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

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

Angular FlexLayout - 子 Div 超出父 div

Angular FlexLayout - Child Div over extends parent div

css

angular-flex-layout

angular