overflow:auto doesn't work, does not show the scroll bar

Question

I need to put a vertical scrollbar on each md-content (content-left & content-right). I've been trying to figure this out for several hours, but it isn't working.

This is my example code: http://codepen.io/anon/pen/zvvodN

html:

  <div ng-controller="AppCtrl" class="listdemoBasicUsage" ng-app="MyApp" >
      <div layout="row" class="main">
      <div flex="50" class="left">  
        <md-content class="content-left">
        <md-list>
          <md-subheader class="md-no-sticky">3 line item</md-subheader>
          <md-list-item class="md-3-line" ng-repeat="item in todos">
            <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
            <div class="md-list-item-text" layout="column">
              <h3>{{ item.who }}</h3>
              <h4>{{ item.what }}</h4>
              <p>{{ item.notes }}</p>
            </div>
          </md-list-item>
        </md-list>
      </md-content>
      </div>


       <div flex class="right">  
        <md-content class"content-right">
        <md-list>
          <md-subheader class="md-no-sticky">3 line item</md-subheader>
          <md-list-item class="md-3-line" ng-repeat="item in todos">
            <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
            <div class="md-list-item-text" layout="column">
              <h3>{{ item.who }}</h3>
              <h4>{{ item.what }}</h4>
              <p>{{ item.notes }}</p>
            </div>
          </md-list-item>
        </md-list>
      </md-content>
      </div>
      </div>
    </div>

css:

body{
  overflow:hidden;}
.main{
  border: 2px solid red;}
.left{
  border: 2px solid green;}
.content-left{
  overflow:auto;}
.right{
  border: 2px solid blue;}
.content-right{
  overflow: auto;}

Thank you for your help.

Solution 1

As other people already said, you need a fixed height for overflow to work. In your codepen I see you have added to your body and html: height:100%. If your intention is to give your left and right content also 100% of the window height and scroll when not enough room, every children NEEDS the same height:100%

Basically if You add this

.content-left, .content-right, .left, .right, .layout, .listdemoBasicUsage {height:100%}

your codepen will look as I think you want.

codepen (your right content does not work because you have two "class="xxxxx" in the same html tag... choose one of put classes inside just one class)

Edited: Maybe your project will have a header and a footer with fixed height (or more elements). If that happens you may need to change the container your now 100% parent to:

height:calc(100% - XXpx - YYpx);

(where XX are your header height and YY your footer height) then it will still works the same as you can see in this modified codepen)

Solution 2

overflow: auto; only works in conjunction with a fixed height for the element. If the element isn't fixed height, there will never be any overflow, so the auto will never apply.

Consider adding a max-height or height to .content-right and .content-left to make the scrollbar show up.

Solution 3

You need to let your containers know what the bounds are. So if you don't want to specify a height like @Aeolingamenfel said, you can do absolute positioning:

.content-left {
  position: absolute;
  top: 0;
  bottom: 0;
}

Comments

[Aeolingamenfel]

True. However you approach it, you need to make sure that the element has bounds, because then its possible for overflow to happen.

[Miguel Navas]

Thank you your answer work but I find a example and all heights are relatives. triangular.oxygenna.com/#/email/inbox/mail/55f1747cbc5fa

[Miguel Navas]

Thank you for the answer. One more think, Why you include .layout in the css rule? is a material class?

[Alvaro Menéndez]

I edited a bit the answer so it may help you in the future

[Alvaro Menéndez]

one of the many multiples children that needs the height:100% is: <div layout="row" class="main layout layout-row"> I just got one of the classes of that div. take into account that I debug a page bsed on the html translated at tools like chrome inspector, firebug, etc. Often the html doens't look the same as it happens when you make a page with asp.net code (asp:label turning into span, etc)