CODEWITHSUNDEEP
cssangularangular-flex-layout
pete19
pete19

Reputation: 53

Angular FlexLayout - Child Div over extends parent div

I have an Ng FlexLayout and the child div over extends out of parent div.

I need it to to stay within maximum height of parent div, and then display a scrollbar if height is larger than parent div.

I cannot seem to get this to work with Ng FlexLayout :-(

I have a super simple plunkr here. As you can see the messages (which are wrapped in their own parent div) extend out of the green parent 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;
}

Upvotes: 0

Views: 731

Answers (1)

isAif
isAif

Reputation: 2344

You should be using overflow: scroll when dimension of your content exceeds the dimension of the container element, this will ensure that your content is visible when scrolled.

Using overflow: hidden will cause the overflowing content to be hidden.

Upvotes: 1

Related Questions