css - 设置自动边距时阻止 flexbox 折叠子宽度

Question

我正在使用 flexbox 创建一个粘性页脚。

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

header, footer {
    background-color: #c9c9c9;
    padding: 20px;
}

main {
    flex: 1;
    margin: 0 auto;
    max-width: 300px;
    border: 1px solid red;
}

<header></header>
<main>This is some content</main>
<footer></footer>

JsFiddle

这没问题，但是 <main> 的宽度现在折叠以适应内容，而不是扩展到最大宽度。只有在设置了自动边距时才会发生这种情况。

有什么办法可以使<main>设置自动边距时扩展到最大宽度？

Answer 1

添加width: 100%;至 <main>似乎可以解决这个问题。

Fiddle link.

*, *:before, *:after {
    box-sizing: border-box;  
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

header, footer {
    background-color: #c9c9c9;
    padding: 20px;
}

main {
    flex: 1;
    margin: 0 auto;
    max-width: 300px;
    width: 100%;
    border: 1px solid red;
}

<header></header>
<main>This is some content</main>
<footer></footer>