css - 在父 div 内部掩码下/后面滚动子 div

Question

我有一个具有固定高度的子 div，它是可滚动的，因为内容扩展了高度。

父 div 有一个红色的内部掩码。

我需要在这个红色内掩码下面/后面滚动子 div 的元素。如何实现？

这是一个plunkr的链接，它展示了messages元素如何在红色蒙版上滚动。

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

h1,
p {
  font-family: sans-serif;
}
#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-y: scroll;
  padding: 10px;
    background-image:
      linear-gradient(to bottom,
        rgba(240, 255, 40, 1) 0%,
        rgba(240, 255, 40, 1) 100%),
      linear-gradient(to bottom,
        rgba(240, 40, 40, 1) 0%,
        rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
    z-index: 100;
}
div.cm{

}

标签： cssangularscrollangular-flex-layout