Flexbox stopping from collapsing child width when setting auto field

Question

I use flexbox to create a sticky footer.

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>

Run codeHide result

Jsfiddle

This works fine, but the width is <main>now minimized to fit the content, rather than expanding to the maximum width. This only happens when the auto field is set.

Is there a way to make it <main>expand to its maximum width when automatic margins are set?

Answer 1

Adding width: 100%;in <main>seems like a fix.

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>

Run codeHide result