Css 柔性包装不适用于固定宽度的容器

我有一个flex box容器和两个子容器，在较小的屏幕上，右侧应该折叠到左侧下方。但是，这似乎仅在父容器宽度为100%时有效，而在设置为固定宽度时无效。它需要一个基于设计的固定宽度，我曾尝试将固定宽度容器包装在一个100%宽度的父容器中，但这并不有效

如何将容器设置为固定宽度，以便以较小的屏幕尺寸正确包装项目

。调出容器{
宽度：1172px；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
柔性包装：包装；
}
.呼叫箱{
颜色：#eee；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}
.呼叫箱{
宽度：自动；
高度：200px；
颜色：#eee；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}
.呼叫箱h1{
字体系列：“Helvetica”；
颜色：#00477B；
字体大小：400；
字体大小：56px；
}
.呼叫信箱p{
颜色：#333；
字体大小：12px；
}

内容

10.5公里
第1行

第2行

10.5公里
第1行

第2行

内容

如果这些尺寸是固定的，则使用网格代替flexbox

.call-out-box{
/*other styles*/
  display:grid;
  grid-template-columns: 540px 445px;
  grid-template-rows: 365px 445px;
}

---

只需删除内嵌样式中的宽度和高度属性。

如果大小是固定的，则使用网格 也去

。调出容器{
宽度：100%；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
柔性包装：包装；
利润上限：200px；
}
.呼叫箱{
颜色：#eee；
显示：网格；
网格模板列：540px 445px；
网格模板行：365px445px；
}
.呼叫名单{
颜色：#eee；
字体大小：粗体；
字号：3em；
文本对齐：居中；
填充顶部：100px；
}
.调出名单h1{
字体系列：“Helvetica”；
颜色：#00477B；
字体大小：400；
字体大小：56px；
}
.调出名单p{
颜色：#333；
字体大小：12px；
}

内容

10.5公里
第1行

第2行

10.5公里
第1行

第2行

内容

如果您不打算使用flex:，那么flexbox没有多大用处。我认为设计需要更改。将

调出容器设置为
宽度：100%
会隐藏左侧下方的右框。我可以使用flexbox属性不隐藏它吗？这样做是因为您在第一个
调用框的内联样式中设置了高度。将第一个
呼出框的高度设置为大于内联样式中的高度，或使用回答中提到的
网格。问题不清楚，但如果将其更改为
最大宽度：1172px，是否有帮助？我用固定的代码更新了我的问题，但是当行折叠时，行之间仍然有不寻常的间距。我添加了一个JSFIDLE链接，因为很难看到上面的代码片段上发生了什么。