试图让 flexbox 项目具有比 flex 容器更高的高度答案

【问题标题】：Trying to get flexbox items to have more height than flex container试图让 flexbox 项目具有比 flex 容器更高的高度
【发布时间】：2019-01-05 10:28:42
【问题描述】：

所以我的高度：100px 的 flex 容器里面有三个 flex 项目，我将这些项目的高度设置为 300px（我希望它们比 flex 容器大 200px）以便它们溢出容器项，但是 flex容器随着弹性项目一起增长，我怎样才能做到这一点？

<section style="width:100%; height:100px; padding:0px 75px; margin-top:200px; outline:1px solid red; display:flex; align-items:flex-end; justify-content:space-around; overflow:visible;">
    <div style="width:28%; height:300px; outline:1px solid red;">
	
	</div>
	<div style="width:28%; height:300px; outline:1px solid red;">
	
	</div>
	<div style="width:28%; height:300px; outline:1px solid red;">
	
	</div>
</section>

【问题讨论】：

容器确实保持了它的高度，尽管在 align-items 设置为 flex-end 时项目被向上推，这意味着它们是底部对齐的。那么这里的实际目标是什么？ ...请注意，标记中位于容器之后的任何元素都将被这些项目重叠

标签： css flexbox overflow

【解决方案1】：

您可能应该更改垂直对齐方式 (align-items) 并考虑使用box-sizing:border-box，以便填充不会使宽度增加超过 100%。

<section style="width:100%; height:100px; padding:0px 75px;box-sizing:border-box; outline:1px solid red; display:flex; align-items:flex-start; justify-content:space-around; overflow:visible;">
  <div style="width:28%; height:300px; outline:1px solid green;">

  </div>
  <div style="width:28%; height:300px; outline:1px solid green;">

  </div>
  <div style="width:28%; height:300px; outline:1px solid green;">

  </div>
</section>

【讨论】：

这正是我想要实现的，但是让 grren div 溢出的部分向上而不是向下
@PeterDickngale 这是你没有的吗？然后可以解释您的实际代码的确切问题是什么？ ...