为什么在显示弹性容器的高度内没有计算填充

Question

 .wrap { display: flex; flex-flow: column; }.row { display: flex; flex-flow: row wrap; background: yellow; } group label { padding: 1em; background: red; }

 <div class='wrap'> <h2> Header </h2> <div class='row'> <group> <label> Label </label> </group> </div> </div>

Why is this padding not inside the calculated height of the container.

Answer 1

Label's are display inline block by default. Set it to default block

 .wrap { display: flex; flex-flow: column; }.row { display: flex; flex-flow: row wrap; background: yellow; } group label { padding: 1em; background: red; display:block }

 <div class='wrap'> <h2> Header </h2> <div class='row'> <group> <label> Label </label> </group> </div> </div>