Html 溢出：自动不'；t工作，不显示滚动条

我需要在每个md内容上放置一个垂直滚动条（内容左侧和内容右侧）。我已经想了好几个小时了，但是没有用

这是我的示例代码：

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>

---

感谢您的帮助。

溢出：自动仅与图元的固定高度配合使用。如果元素不是固定高度，则不会有任何溢出，因此
auto
将永远不会应用

考虑将
max height
或
height
添加到
.content right
和
.content left
以显示滚动条。
您需要让容器知道边界是什么。因此，如果您不想像@Aeolingamenfel所说的那样指定高度，您可以进行绝对定位：

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

正如其他人已经说过的那样，
overflow
需要一个固定的高度才能工作。在你的代码笔中，我看到你在身体和html中添加了：
height:100%
。如果您的目的是在没有足够的空间时将左右内容也设置为100%的窗口高度并滚动，则每个孩子都需要相同的
高度：100%

基本上如果你加上这个

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

你的
codepen
看起来就像我想的那样

（您正确的内容不起作用，因为您在同一个html标记中有两个
“class=”xxxxx“
，请在一个
类中选择一个放置类）

已编辑：可能您的项目将具有固定高度的页眉和页脚（或更多元素）。如果发生这种情况，您可能需要将您现在的100%父级容器更改为：

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

（其中XX为页眉高度，YY为页脚高度）然后，它仍然会像您在这个修改后的）中看到的一样工作。
True。无论您如何处理它，您需要确保元素有边界，因为这样可能会发生溢出。谢谢您的回答，工作正常，但我找到了一个示例，所有高度都是相关的。谢谢您的回答。再想想，为什么要包括布局Icss规则？是一个材料类吗？我编辑了一点答案，以便在将来对您有所帮助。需要
高度的许多倍数的孩子中，有一个是：
我刚刚得到了
div
的一个类。考虑到我在chrome inspector、firebug、，通常，html看起来与使用asp.net代码创建页面时发生的情况不同（asp:label转变为span等）
height:calc(100% - XXpx - YYpx);