html - 2列响应式独立布局1个溢出

Question

使用 Angular Material ，您可以轻松地创建响应式布局。现在我正在使用 2 列，但它们应该独立于 2 个溢出，就像我在这个例子中所做的那样:http://jsfiddle.net/2f6qscrp/227/问题是 react 灵敏；这些列在移动设备上位于下方，在较大的设备上正确地位于右/左，但它们仍然保持每列 2 个溢出，而不是创建一个包含两列的主要溢出。有什么办法可以解决吗？

<div ng-app="home" ng-controller="MainCtrl" class="scroll">
  <div layout="column" layout-gt-sm="row" class="scroll">
    <div flex class="blue">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit venenatis neque ut lacinia. Sed quis tortor vitae massa ornare aliquam. Cras vel aliquam tellus. Maecenas eleifend arcu eros, a cursus dui tempor sed. Aenean dignissim consectetur turpis ut scelerisque. Nullam ullamcorper ut sapien at convallis. Maecenas justo enim, lobortis ac leo at, venenatis dapibus sapien. Maecenas elementum urna a est eleifend mollis. Mauris vel ex blandit, aliquam urna eu, eleifend libero. Vestibulum commodo porta auctor. Fusce quis vulputate metus. Vestibulum commodo rutrum orci at efficitur. Sed luctus elit ut viverra porttitor. Donec cursus luctus purus ac vehicula. Cras ac ornare nibh, eget tempor nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut bibendum, nibh at ultrices convallis, eros nisl congue lacus, at sodales mauris nunc in velit. Vivamus molestie magna aliquet, varius velit in, posuere nunc. Sed a feugiat odio. Duis eu nisl quis diam aliquam interdum at quis turpis. In mollis lobortis erat in congue. Nulla et scelerisque ipsum. Phasellus imperdiet eu lacus eu lacinia. Cras vitae tempor magna.

Aenean venenatis mauris nibh, sit amet varius diam condimentum eu. Curabitur efficitur massa magna. Duis pretium sem ac consequat egestas. Proin lobortis mauris vitae urna pulvinar, a tincidunt orci facilisis. In porta eleifend fermentum. Vestibulum accumsan, metus a condimentum tristique, augue nisl placerat eros, id posuere nunc orci vel metus. Integer at massa efficitur, auctor neque nec, placerat nisl. Cras fringilla, nisi ut accumsan facilisis, dolor enim placerat elit, non venenatis turpis dui in tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sollicitudin odio ac nisi fermentum dapibus. Cras euismod tortor quis consequat porta. Suspendisse semper vehicula ultricies. Quisque maximus sollicitudin justo at rhoncus. Donec eu vestibulum mauris, at consequat tortor.

Fusce sollicitudin a justo vitae convallis. Pellentesque interdum, purus at mollis molestie, metus tortor sagittis eros, vitae mattis lorem leo in sapien. Vivamus porttitor diam eu quam lacinia, vel commodo dolor venenatis. Mauris magna est, ele
    </div>
    <div flex class="red">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit venenatis neque ut lacinia. Sed quis tortor vitae massa ornare aliquam. Cras vel aliquam tellus. Maecenas eleifend arcu eros, a cursus dui tempor sed. Aenean dignissim consectetur turpis ut scelerisque. Nullam ullamcorper ut sapien at convallis. Maecenas justo enim, lobortis ac leo at, venenatis dapibus sapien. Maecenas elementum urna a est eleifend mollis. Mauris vel ex blandit, aliquam urna eu, eleifend libero. Vestibulum commodo porta auctor. Fusce quis vulputate metus. Vestibulum commodo rutrum orci at efficitur. Sed luctus elit ut viverra porttitor. Donec cursus luctus purus ac vehicula. Cras ac ornare nibh, eget tempor nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut bibendum, nibh at ultrices convallis, eros nisl congue lacus, at sodales mauris nunc in velit. Vivamus molestie magna aliquet, varius velit in, posuere nunc. Sed a feugiat odio. Duis eu nisl quis diam aliquam interdum at quis turpis. In mollis lobortis erat in congue. Nulla et scelerisque ipsum. Phasellus imperdiet eu lacus eu lacinia. Cras vitae tempor magna.

Aenean venenatis mauris nibh, sit amet varius diam condimentum eu. Curabitur efficitur massa magna. Duis pretium sem ac consequat egestas. Proin lobortis mauris vitae urna pulvinar, a tincidunt orci facilisis. In porta eleifend fermentum. Vestibulum accumsan, metus a condimentum tristique, augue nisl placerat eros, id posuere nunc orci vel metus. Integer at massa efficitur, auctor neque nec, placerat nisl. Cras fringilla, nisi ut accumsan facilisis, dolor enim placerat elit, non venenatis turpis dui in tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sollicitudin odio ac nisi fermentum dapibus. Cras euismod tortor quis consequat porta. Suspendisse semper vehicula ultricies. Quisque maximus sollicitudin justo at rhoncus. Donec eu vestibulum mauris, at consequat tortor.

Fusce sollicitudin a justo vitae convallis. Pellentesque interdum, purus at mollis molestie, metus tortor sagittis eros, vitae mattis lorem leo in sapien. Vivamus porttitor diam eu quam lacinia, vel commodo dolor venenatis. Mauris magna est, elementum nec erat id, tristique lacinia tellus. Integer varius id nisl vitae aliquam. Nullam commodo neque et sapien laoreet gravida. Morbi finibus dapibus ipsum, ac maximus lacus condimentum ut.

Mauris accumsan, felis ac vestibulum faucibus, ligula tellus pretium leo, quis feugiat ligula turpis a velit. In sit amet velit dui. Nunc ultricies sem gravida erat posuere, tempus molestie orci tempor. Sed maximus bibendum laoreet. Vestibulum ac placerat felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod eget leo a imperdiet. Maecenas eu pretium purus, ut volutpat eros.
    </div>
  </div>
</div>

CSS:

.scroll {
   min-height: 100%;
   height:100%;
}

.blue {
  background-color: #0D47A1;
  color: #fff;
  min-height: 100%;
  overflow-y: scroll;
  height:100%;
}

.red {
  background-color: #B71C1C;
  color: #fff;
  min-height: 100%;
  overflow-y: scroll;
  height:100%;
}

谢谢

Answer 1

试试这个

.scroll {
   min-height: 100%;
  height:100%;
}

.blue {
  background-color: #0D47A1;
  color: #fff;
  min-height: 100%;
  overflow-y: scroll;
  height:100%;
}

.red {
  background-color: #B71C1C;
  color: #fff;
  min-height: 100%;
  overflow-y: scroll;
  height:100%;
}

@media (max-width:1600px) {
  .blue, .red, .scroll {
    height: auto;
    min-height: auto;
  }
}

演示 - http://jsfiddle.net/2f6qscrp/228/