收缩页面宽度时，柔性框的最大宽度不起作用

Question

我正在制作一个应用了最大和最小宽度的柔性盒子。但当我缩小页面大小时无法工作。它显示了空白区域。如何修复？

.parent{
border: 1px solid red;
width: 50%;
margin:0 auto;
display: flex;
flex-wrap: wrap;  
}
.parent div {
background-color: yellow;
width: 50%;
min-width: 150px;;
max-width: 100%;
}
.parent div:last-child{
background-color: red;
margin:0 auto;
}

<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

当最小大小小于预期时，它不会移动到100%。但显示了空白区域

Answer 1

因为max-width与宽度不同。

你必须告诉元素尽可能地扩展到它的最大宽度，在这种情况下是flex:1

.parent{
border: 1px solid red;
width: 50%;
margin:0 auto;
display: flex;
flex-wrap: wrap;  
}
.parent div {
background-color: yellow;
width: 50%;
min-width: 150px;;
max-width: 100%;
flex:1;
}
.parent div:last-child{
background-color: red;
margin:0 auto;
}

<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Answer 2

您可以通过将最后一个元素的宽度设为100%来解决此问题：

.parent{
border: 1px solid red;
width: 50%;
margin:0 auto;
display: flex;
flex-wrap: wrap;  
}
.parent div {
background-color: yellow;
width: 50%;
min-width: 150px;;
max-width: 100%;
}
.parent div:last-child{
background-color: red;
width: 100%;
margin:0 auto;
}

<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>