Question

我有一个固定大小的flex元素，包含一个flex项。此flex项目有一个溢出的子项。我期望激活溢出以允许flex项适合flex元素（因为flex项可以默认收缩）。但事实并非如此。

＆＃13;

.wrapper {  
  width: 500px;
  height: 100px;
  display: flex;
  flex-direction: column;
} 
.pane { 
  overflow: auto; 
}
div {
  padding: 10px;
  background-color: rgba(255, 0, 0, 0.3);
  border: 1px solid
}

＆＃13;

<div class="wrapper"> 
  <div class="body"> 
    <div class="pane"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula eget metus at maximus. Proin at nunc nibh. Curabitur elementum ipsum urna, ut rutrum justo consequat nec. Integer volutpat ornare nunc, ac pellentesque magna pharetra nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed turpis vitae dolor consequat elementum. Aenean in tempus nisi. Mauris varius finibus nunc, nec feugiat odio pharetra eget. Morbi maximus velit id tellus congue dignissim. Suspendisse potenti. Duis mattis ligula non purus dapibus, ac ornare urna tincidunt. Integer orci turpis, iaculis ac ornare a, dignissim sit amet libero. Cras libero risus, finibus tincidunt neque scelerisque, elementum tempus sapien. 
    </div>
  </div>
</div>

＆＃13;

这是一个样本 https://codepen.io/anon/pen/zzvmNR?editors=1100

在.body课程中使用display flex很容易修复，但是我试图理解为什么它不能用于第一次尝试。

有人可以解释一下发生了什么吗？

感谢。

Answer 1

您需要将高度或最大高度设置为.pane，以便在内容溢出时使用滚动条。

在flex项嵌入块上溢出

1 个答案: