Css 如何使用flexbox收缩包装div？

使用flex box收缩包装div的最佳方法是什么？ 在下面的代码片段中，我有一个包装器（绿色边框）收缩包装内容（红色和蓝色框），除了底部之外，其他所有面都有

我怎样才能做到这一点

下面是一个plunker演示：

.red{
宽度：100px；
高度：50px；
背景色：红色；
}
蓝先生{
宽度：100px；
高度：50px；
背景颜色：蓝色；
}
.集装箱2{
宽度：400px；
高度：300px；
边框：实心；
显示器：flex；
证明内容：中心；
}
.wrapper 2{
边框：纯绿色；
填充物：5px；
}

x
x

您可以使用：

• 对齐项目

.container2{
宽度：400px；
高度：300px；
边框：实心；
显示器：flex；
证明内容：中心；
对齐项目：flex start；/*此处更新*/
}

.red{
宽度：100px；
高度：50px；
背景色：红色；
}
蓝先生{
宽度：100px；
高度：50px；
背景颜色：蓝色；
}
.集装箱2{
宽度：400px；
高度：300px；
边框：实心；
显示器：flex；
证明内容：中心；
调整项目：灵活启动；
}
.wrapper 2{
边框：纯绿色；
填充物：5px；
/*保证金：0自动*/
}

x
x

使用

对齐项目：flex start.container2

.red{
宽度：100px；
高度：50px；
背景色：红色；
}
蓝先生{
宽度：100px；
高度：50px；
背景颜色：蓝色；
}
.集装箱2{
宽度：400px；
高度：300px；
边框：实心；
显示器：flex；
证明内容：中心；
调整项目：灵活启动；
}
.wrapper 2{
边框：纯绿色；
填充物：5px；
}

x
x