CSS问题:灵活的宽度使其可以回流

Question

有人能帮我吗？我如何使父容器变得灵活并做好回流准备？

.container{
width: 350px;
border: 1px solid red;
}
.item{
margin-top:2px;
display: flex;
}
.line{
flex-grow:1;
}

<div class="container">
<div class="item">
<div class="line"><span>xyx</span></div>
<span>10 USD</span>
</div>
<div class="item">
<div class="line"><span>q</span></div>
<span>* 2</span>
</div>
<div class="item">
<div class="line"><span>total</span></div>
<span>20 USD</span>
</div>
</div>

Answer 1

由于您将回流称为浏览器宽度更改，并且容器的默认宽度为350px

只需将width: 350px更改为max-width: 350px。您的容器现在可以响应较小的浏览器宽度

你可以在这里玩，并在这里更改浏览器：

.container{
max-width: 350px;
border: 1px solid red;
}
.item{
margin-top:2px;
display: flex;
}
.line{
flex-grow:1;
}

<div class="container">
<div class="item">
<div class="line"><span>xyx</span></div>
<span>10 USD</span>
</div>
<div class="item">
<div class="line"><span>q</span></div>
<span>* 2</span>
</div>
<div class="item">
<div class="line"><span>total</span></div>
<span>20 USD</span>
</div>
</div>