flexbox中的居中元素不会拉伸到最大宽度

Question

我如何在弹性框中居中放置一个元素，使其伸展到max-width？

在this example中，我希望红色框延伸到400px；

我该如何实现？

Answer 1

为使其正常工作，我在width:100%顶部添加了maw-width:400px

Answer 2

只需使用flex

.my-box {
 background: red;
 height: 100px;
 flex: 0 400px;
}

和

flex-direction: row;