css - flex 容器中的垂直溢出

Question

我有一个带有 height: 100% 和 display: flex 的容器，子元素左下对齐。

当 children 溢出时，我需要显示滚动条，而且 overflow: auto 也不会发生。

这是一支笔:http://codepen.io/anon/pen/QdWzPd

谢谢!

Answer 1

如果你添加了 justify-content 属性，那么 overflow: scroll 将不起作用。在 flex-box 中添加一个子 div，并为其赋予 overflow 属性

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#container {
    align-content: flex-start;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    height: 100%;
    overflow-y: auto;
    background: #bebebe;
}
.inner_container{
  max-height: 100%;
  overflow-y: auto;
}

.box {
    align-self: flex-start;
    background: #e5e5ea none repeat scroll 0 0;
    border-radius: 3px;
    margin-bottom: 25px;
    margin-left: 8px;
    max-width: 80%;
    padding: 10px 15px;
    position: relative;
}

<div id="container">
  <div class="inner_container">
    <div class="box">


  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ornare urna eget ornare. In eget ornare velit, nec rhoncus lectus. Pellentesque vitae tortor tellus. Praesent elementum, nulla at porta elementum, lacus turpis tempus turpis, efficitur viverra libero turpis vel erat. Sed mollis lectus id libero volutpat tincidunt. Ut eleifend odio lectus, a vulputate arcu posuere id. Pellentesque laoreet enim vitae nibh eleifend porta. 
    </div>
    <div class="box">


  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ornare urna eget ornare. In eget ornare velit, nec rhoncus lectus. Pellentesque vitae tortor tellus. Praesent elementum, nulla at porta elementum, lacus turpis tempus turpis, efficitur viverra libero turpis vel erat. Sed mollis lectus id libero volutpat tincidunt. Ut eleifend odio lectus, a vulputate arcu posuere id. Pellentesque laoreet enim vitae nibh eleifend porta. 
    </div>
  </div>
</div>

这是我更新的 codePen