2 столбца отзывчивый независимый макет 1 переполнение

Question

Использование углового материала вы можете легко собрать в удобной манере. Сейчас я использую 2 столбца, но они должны быть независимы с 2 переполнениями, как в этом примере, я сделал: http://jsfiddle.net/2f6qscrp/227/ Проблема - отзывчивая; Столбцы идут ниже на мобильном телефоне, а вправо/влево на более крупных устройствах правильно, но они все еще поддерживают 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; 
    } 
} 

Demo - http://jsfiddle.net/2f6qscrp/228/

Answer 2

Если я правильно понимаю:

• Вы хотели бы большие экраны, чтобы показать две колонки (красные и синие в ваши макеты) , каждый из которых может прокручиваться по вертикали независимо как , поскольку контент равен l ong достаточно для переполнения.
• На небольших экранах (мобильные) вы хотели бы, чтобы эти два столбца стали одним длинным прокручиваемым столбцом.

Для достижения этой цели вы можете использовать медиа-запросы. Например:

@media (max-width:600px) { 
    .red, 
    .blue { width: 100%; } 
} 

Добавление этого к CSS вашего JSFilddle создаст эффект, который, как я думаю, вам нужен. Вы можете расширить и сузить окно браузера, чтобы увидеть, какое влияние оно оказывает.

(Быстрое обновление:. Я выбрал максимальную ширину в 600px в произвольной подвижной как меры Вы можете обновить это по мере необходимости, в идеале на основе так, содержание и структура работает на месте)