Flex Box Testing with Chrome 47

by sberube

HTML

<div class="outer">
  <div class="flex" style="height: 100%">
    <div class="flex">
      <div class="flex">
        <div class="flex">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum dapibus justo id ullamcorper. Duis facilisis diam vel felis vestibulum sodales. Vestibulum aliquet sit amet tellus ac egestas. Fusce eu imperdiet mi. Nulla ut faucibus nibh, tempus
            accumsan lacus. Nam at orci eros. Nullam pulvinar suscipit porta. Etiam a arcu et mi consequat gravida a eget lacus. Praesent ac vestibulum odio, nec interdum urna. Quisque scelerisque eu turpis sit amet faucibus. Praesent et diam in tellus
            aliquam euismod. Donec euismod mauris ante, et cursus odio egestas in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sit amet nisl tincidunt, ultricies purus vel, finibus purus. Sed finibus
            leo sed mi ultricies luctus. Aliquam ut mi et ex viverra pulvinar et vitae erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam non finibus erat, sed mollis velit. Sed lacinia dictum dapibus. Proin in tempor mi. Donec nulla
            diam, ullamcorper a vehicula ac, tempus at urna. Aliquam arcu leo, ultrices non sollicitudin id, pellentesque sed eros. Vivamus maximus a ante vehicula congue. Mauris sed leo semper, congue eros vulputate, maximus lorem. Phasellus et purus
            vel nisi auctor sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie nunc tristique ante egestas, et ullamcorper enim consequat. Vivamus non eros non felis tincidunt tempor. Nullam at placerat nisi. Duis vel lorem
            sagittis, lacinia ex id, ultricies ipsum. Nullam nec aliquet eros. Nunc odio tortor, ullamcorper nec ornare in, aliquam non nibh. Mauris porttitor malesuada lectus, at cursus turpis porttitor ut. Aenean justo mauris, scelerisque in urna accumsan,
            lobortis bibendum mi. Duis cursus sem sed...

CSS

.outer {
  border: 1px solid red;
  padding: 10px;
  width: 250px;
  height: 500px;
  display: flex;
  -webkit-flex-direction: column;
}

.flex {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.buttons {
  padding-top: 10px;
  padding-bottom: 10px;
}