為什么在顯示彈性容器的高度內沒有計算填充

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>

為什么這個填充不在容器的計算高度內。

Answer 1

默認情況下，標簽是顯示內聯塊。 將其設置為默認塊

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