htmlのレイアウト（2カラム）をflexを利用して作りたい

Question

【やりたいこと】
htmlのレイアウト（2カラム）をflexを利用して作りたい。
・header,footerは横幅いっぱいに表示
・footerはsticky footerになるように設定
・main-wrapをmax-width:1000pxで表示
・main,asideを画面幅600px以上の時、2カラムで表示

現在のコード

<header>header</header>

<div class="main-wrap">
    <main>
        <h2>test</h2>
        <p>test test test test test test test test</p>
    </main>
    <aside id="side">
        <h2>test</h2>
        <p>test test test test test test test test</p>
    </aside>
</div>

<footer><small>footer</small></footer>

body {
    font-family: font-family: 'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}
header {
    background: #aaa;
    padding: 15px;
}
.main-wrap {
    flex: 1;
    padding: 20px
}
main {
    background: #ff5500;
    padding: 0px;
}
aside {
    background: #eee;
    padding: 15px;
}
footer {
    background: #ffa;
    padding: 15px;
}

@media (min-width: 600px) {
    .main-wrap {
        display: flex;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    main {
        background: #ccc;
        flex:4;
    }
    aside {
        background: #eee;
        flex:1;
    }

}

上記コードの場合、
・header,footerは横幅いっぱいに表示
・footerはsticky footerになるように設定
・main,asideを画面幅600px以上の時、2カラムで表示
の3点は実現できているのですが、

・main-wrapをmax-width:1000pxで表示
が実現できません。

画面幅1000px以上になるようにしても、main-wrapの幅が
600pxほどにしかならず、いろいろと数値を変えたりはしてみたのですが、
行き詰っております。

勉強中のため、いろいろとコードに不備があるかとは思いますが、
ご教授いただけると幸いです。
よろしくお願いいたします。

Answer 1

.sample {
    max-width:1000px;
    width:100%;
}

Comments

[beginner_t]

ご回答ありがとうございます。

width:100%を設定することにより、中身が少ない場合でもwidthを保つことができました。
ありがとうございます。

またわからないことがあればご教授お願い致します。

Answer 2

max-widthの指定が間違っているんだと思います。
min-widthか普通にwidthだけの指定で横幅のサイズは指定できます。

cssの意味はこんな感じです。
max-width:1000px;（最大の幅1000px。どんだけ画面が広がっても最大1000pxまでしか広がりません。）
min-width:1000px;（最小の幅1000px。どんだけ画面が狭まっても最低1000px以下には狭まりません。）
width:1000px;（どんな状態でも1000px）

なぜmainwrapの幅が600pxぐらいなのかというと「最大の幅1000px」「mainwrapの中身600px」という状態で、
最大幅にwidthが満たしていなかったためだと思います。

Comments

[beginner_t]

今回、max-widthを使用しているのは、今後mainの中にグリッドを配置し、さらにそれをflexに設定して、画面幅によってグリッドの折り返し設定などをしたいと思っているからです。
できれば、max-widthを使って実現したいなとは思っているのですが。

ご回答いただいているように、「mainwrapの中身600px」というのを満たすためには、
mainとasideの中身を増やせば可能ということでしょうか？

よろしくお願いいたします。