Question

所以我的height：100px的flex容器内部有三个flex项目，我将这些项目的高度设置为300px（我希望它们比flex容器大200px），以便它们溢出容器titem，但是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>

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

试图使flexbox项目比flex容器具有更高的高度

1 个答案: