我有一個最小寬度和可變列數的表格。但是第一列將始終具有相同的內容，帶有幾個圖示堆疊在一起的容器。
我需要display: flex在容器上使用，但這會將它拉伸到列的全寬，這會破壞我的布局，請參見下面的示例：
table {
width: 500px;
background-color: tan;
}
.stack-container {
position: relative;
display: flex; /* This is the troublemaker */
}
.icon1 {
font-size: 22px;
}
.icon2 {
position: absolute;
right: -2px;
bottom: -3px;
}<table>
<tr>
<td>
<span class="stack-container">
<span class="icon1">A</span>
<span class="icon2">o</span>
</span>
</td>
<td>Two</td>
</tr>
</table>如何防止.stack-containerwithdisplay: flex拉伸到表格單元格的全寬并使其僅拉伸到其內容的寬度？
我想要實作的示例：
注1：它何時也.stack-container被display: block拉伸。
注意2：當.stack-container是 時display: inline，則它不會拉伸到表格單元格的整個寬度。
uj5u.com熱心網友回復：
老實說，我不確定你到底想做什么，但嘗試使用inline-flex而不是flex
uj5u.com熱心網友回復：
您可以嘗試將這些樣式用于第一個 td。
td:first-child {
width: 1px;
white-space: nowrap;
}
uj5u.com熱心網友回復：
在這種情況下，把display: flex中table以及應其內容不會去全寬。看看這支筆。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/345047.html