如果一个空div得到一行文本，请避免垂直移动

Question

我在一列中有3个<div>和flex(此布局需要保留(。

如何使#a和#b占用一整行高度，即使为空？在#a和#b中插入一行文本时，是否防止所有内容移动

如果可能的话，不使用固定数量的像素进行硬编码。

document.getElementById("go").onclick = () => {
document.getElementById("a").innerHTML = "a";
document.getElementById("b").innerHTML = "b";
};

#main { 
height: 150px; 
display: flex; 
align-items: center;             /* i want to */
justify-content: space-around;   /* keep this */
flex-direction: column; 
background-color: yellow; 
}

<div id="main">
<div><button id="go">Click me</button></div>
<div><i id="a"></i></div>
<div><i id="b"></i></div>
</div>

Answer 1

将子级height设置为100%

document.getElementById("go").onclick = () => {
document.getElementById("a").innerHTML = "a";
document.getElementById("b").innerHTML = "b";
};

.main {
height: 150px;
display: flex;
flex-direction: column;
align-items: center;     /* i want to */
justify-content: space-around;    /* keep this */
gap: 5px;    /* you can remove this */
}
.main>div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: yellow;    /* you can remove this */
}

<div class="main">
<div>
<button id="go">click Me</button>
</div>
<div>
<i id="a"></i>
</div>
<div>
<i id="b"></i>
</div>
</div>

Answer 2

我会禁用行高，但只有当它是一行文本并且您有足够的高度来避免溢出时，这才会起作用。

document.getElementById("go").onclick = () => {
document.getElementById("a").innerHTML = "a";
document.getElementById("b").innerHTML = "b";
};

#main {
height: 150px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
}
#main i {
line-height: 0;
display: inline-block;
}

<div id="main">
<div><button id="go">Click me</button></div>
<div><i id="a"></i></div>
<div><i id="b"></i></div>
</div>