Question

我有一个容器height: 100%和display: flex，孩子们左右对齐。

当孩子们满溢的时候，我需要显示滚动条，但是overflow: auto它也不会显示。

谢谢！

Answer 1

如果您添加了justify-content属性，则overflow: scroll无法正常工作。在flex-box中添加一个子div并将overflow属性赋予该

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这是我更新的 codePen

在Flex容器中溢出垂直

1 个答案: