我有一个带有两个子容器的flex-box容器，在屏幕较小的情况下，右边的容器应该折叠在左边的容器下面。然而，这似乎只在父容器宽度为100%时才起作用，而当它设置为固定宽度时则不起作用。它需要一个基于设计的固定宽度，我尝试将固定宽度的容器包装在具有100%宽度的父容器中，但这并不有效。
如何将容器设置为固定宽度，以便项目在较小屏幕尺寸下正确换行？
null
.call-out-container {
width: 1172px;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
flex-wrap: wrap;
}
.call-out-box {
color: #eee;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.call-out-box {
width: auto;
height: 200px;
color: #eee;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.call-out-box h1 {
font-family: 'Helvetica';
color: #00477B;
font-weight: 400;
font-size: 56px;
}
.call-out-box p {
color: #333;
font-size: 12px;
} <div class="call-out-container">
<div class="call-out-box">
<div style="width: 540px; height: 365px; margin: 0px 0px 0px 80px; display: flex; border: 2px solid orange; justify-content: center;">
<div style="width: 445px; height: 445px; background-color: rgb(255, 255, 255); box-shadow: rgb(221, 221, 221) 0px 3px 11px 4px; position: relative; right: -30px; top: 20px; text-align: center; vertical-align: middle;">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="call-out-list">
<h1>10.5k</h1>
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
<div class="call-out-container">
<div class="call-out-list">
<h1>10.5k</h1>
<p>Line 1</p>
<p>Line 2</p>
</div>
<div class="call-out-box">
<div style="width: 540px; height: 365px; margin: 0px 0px 0px 80px; display: flex; border: 2px solid orange; justify-content: center;">
<div style="width: 445px; height: 445px; background-color: rgb(255, 255, 255); box-shadow: rgb(221, 221, 221) 0px 3px 11px 4px; position: relative; right: -30px; top: 20px; text-align: center; vertical-align: middle;">
<p>CONTENT</p>
</div>
</div>
</div>
</div>null
JSFIDDLE链接：链接
如果这些尺寸是固定的，则使用网格，而不是使用flexbox。
.call-out-box{
/*other styles*/
display:grid;
grid-template-columns: 540px 445px;
grid-template-rows: 365px 445px;
}
只需删除行内样式中的width和height属性。
如果大小是固定的，那么使用网格也可以在这里使用jsfiddle
null
.call-out-container {
width: 100%;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 200px;
}
.call-out-box {
color: #eee;
display:grid;
grid-template-columns: 540px 445px;
grid-template-rows: 365px 445px;
}
.call-out-list {
color: #eee;
font-weight: bold;
font-size: 3em;
text-align: center;
padding-top: 100px;
}
.call-out-list h1{
font-family: 'Helvetica';
color: #00477B;
font-weight: 400;
font-size: 56px;
}
.call-out-list p {
color: #333;
font-size: 12px;
}<div class="call-out-container">
<div class="call-out-box">
<div style="width: 540px; height: 365px; margin: 0px 0px 0px 80px; display: flex; border: 2px solid orange; justify-content: center;">
<div style="width: 445px; height: 445px; background-color: rgb(255, 255, 255); box-shadow: rgb(221, 221, 221) 0px 3px 11px 4px; position: relative; right: -30px; top: 20px; text-align: center; vertical-align: middle;">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="call-out-list">
<h1>10.5k</h1>
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
<div class="call-out-container">
<div class="call-out-list">
<h1>10.5k</h1>
<p>Line 1</p>
<p>Line 2</p>
</div>
<div class="call-out-box">
<div style="width: 540px; height: 365px; margin: 0px 0px 0px 80px; display: flex; border: 2px solid orange; justify-content: center;">
<div style="width: 445px; height: 445px; background-color: rgb(255, 255, 255); box-shadow: rgb(221, 221, 221) 0px 3px 11px 4px; position: relative; right: -30px; top: 20px; text-align: center; vertical-align: middle;">
<p>CONTENT</p>
</div>
</div>
</div>
</div>