我想连续放置3个Box，第二排再放置3个。如果我不添加margin: 2px;和width: calc(33%-4px);，这会很好。但是，如果我添加margin: 2px;并将宽度调整为width: calc(33% - 4px);，那么所有内容都将排在同一行。请让我知道我在使用width calc方法时在做什么。
错误代码-
.container { display: flex; flex-wrap: wrap; }
.box {
flex-grow: 1;
width: calc(33%-4px);
height: 100px;
background: green;
margin: 2px;
}<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>
工作代码-
.container { display: flex; flex-wrap: wrap; }
.box {
flex-grow: 1;
width: 33%;
height: 100px;
background: green;
}<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>