我有一个 CSS 网格，它垂直流动，当第一列写满时会换行到新的一列。我期望这个网格元素的宽度恰好等于其所有列的宽度。然而，它似乎取了所有子元素宽度的总和。
具体来说，如果你改变其中一个较短元素的宽度（例如将 4a 改为 4aa），虽然它所在列的宽度没有改变，但整个网格的宽度会改变。这看起来似乎不太正确。
我如何确保网格仅占用其列的宽度？
.parent {
display: flex;
flex-direction: column;
align-items: center;
}
.grid {
border: 1px solid black;
height: 200px;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(auto-fit, 35px);
grid-auto-columns: min-content;
}
.grid > * {
display: flex;
border: 1px solid gray;
}<div class="parent">
<p>label</p>
<div class="grid">
<div>1aaaaa</div>
<div>2aaa</div>
<div>3aa</div>
<div>4a</div>
<div>5aa</div>
<div>6aa</div>
<div>7a</div>
</div>
</div>以下是预期的行为，但我希望父级是一列弹性框。
.grid {
border: 1px solid black;
height: 200px;
display: grid;
width: min-content;
grid-auto-flow: column;
grid-template-rows: repeat(auto-fit, 35px);
grid-auto-columns: min-content;
}
.grid > * {
display: flex;
border: 1px solid gray;
}<div class="parent">
<p>label</p>
<div class="grid">
<div>1aaaaa</div>
<div>2aaa</div>
<div>3aa</div>
<div>4a</div>
<div>5aa</div>
<div>6aa</div>
<div>7a</div>
</div>
</div>
