CSS : モバイルでのwidthの挙動について

Question

以下のようなCSS、HTMLがあります。

.wrapper{
    text-align: center;
    background:#f00;
}
.center-columun{
    background:#0f0;
    max-width: 375px;
    margin:0 auto;
}

 <div className="wrapper">
    <div className="center-columun">
         aaa
    </div>
</div>

これをChromeのDevelopper Toolsでモバイル表示した結果、以下が描画されました。

赤がwrapper、緑がcenter-columnとなっています。
画面幅が375に対し、center-columunのmax-widthも375なので、横幅全体が緑になってほしいというのが期待する挙動です。
しかしながら、描画されている領域は明らかに横幅の375pxより狭くなっています。なぜでしょうか。
ちなみに、モバイルではなくPCで表示すると期待した通りの挙動をします。

Answer 1

viewportを適切に設定しましょう。
headに下記を追加すればいいでしょう。

<meta name="viewport" content="width=device-width,initial-scale=1">

もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

Comments

[anzchan]

解決しました。ありがとうございます！

Answer 2

max-widthは最大の大きさを決めるものです。
なので、指定したサイズになる事をさせない。
それ以下にさせるものです。
指定した画面幅いっぱいに表示させるものとして
100vwというのがありますよ。

Comments

[anzchan]

デフォルトでwidth:100%になるため、max(画面幅,375px)になります
このケースだと画面幅が375なので、画面いっぱいの幅になるのでは？という趣旨の質問でした。