cssでwidth100%にしているのにウインドウ幅250px以下だと要素がはみだす謎について

CSSの学習をしているのですがどうしてもわからない点があります。

bodyタグの直下で親要素を持たないdivにCSSでwidth100%を指定すれば　、ウインドウ幅を変動させてもウインドウ幅にピッタリ100%で表示される（足りなかったり、はみ出したりしない）という理解なのですが、ウインドウ幅を狭めていくと、ウインドウ幅が250px以下になると要素がウインドウをはみだすようになります。

逆に、ウインドウ幅251px以上は、ピッタリ表示されます。なぜ、途中までは100%表示できて、ある一点以下から要素がはみ出すようになるのでしょうか。

下記コードだとclass="box"を指定しているdiv要素がウインドウ幅250px以下になると、ウインドウ幅をはみだすようになります。

html
1!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <div class="box">
10        <div class="box-inner">
11        </div>
12    </div>
13</body>
14</html>

css
1.box{
2    background: rgba(47, 10, 209,0.5);
3    width: 100%;
4    height: 100px;
5    padding:30px;
6    margin: 30px; 
7}
8
9.box-inner{
10    background: rgba(118, 206, 247, 0.5);
11    width: 100%;
12    height: 100%;
13}

widthへの理解が何か間違っているのでしょうか。レスポンシブについて学んでいく上でここの理解をしっかりしておきたいと思っています。

この原因とウインドウ幅を変動させてもボックスをピッタリ表示させる一般的な方法などがあれば、ご教授お願いします。

＊ブラウザは、Cromeを使っており、ウインドウ幅の変動はデベロッパーツールで行っています。

Rwight

2021/03/27 06:05 編集

えーとですね、アドバイスですが・・・あの質問の所で編集があると思うので　スクリーンショット　をとった方が良いと思います。。。(このままでは回答出来ないので)

hatena19

2021/03/27 06:44

現状のHTML、CSSだと、ウインドウ幅が250px以上でもはみ出します(margin と padding分)。なにか他にCSSが設定されてませんか。リセットCSSとか、CSSフレームワークとか。あっ、タグにCSSフレームワークがありますね。どのCSSフレームワークを使ってますか。

jinn614

2021/03/27 07:25

> rink-9301 スクリーンショット貼りました。意図が伝わると嬉しいです。 > hatena19 すみません、、リセットCSSもCSSフレームワークと使ってないです。「現状のHTML、CSSだと、ウインドウ幅が250px以上でもはみ出します(margin と padding分)」 ->margin と padding分はみだすは理解できています！ちょっとここに関しては伝えたい事を伝えるために色の違いで境界がみえるようにしたくてつけたというか。ちょっと質問の仕方がまずかったかもです。すみません。

行動規範の内容に同意します

回答1件

ベストアンサー

手っ取り早い回答：

↓これを入れましょう。

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

細かい話：

当方で試したところ、250pxではなくて267pxに境界があるように思えました。

おそらく、minimum-scale の最小値が 0.25 で、width の初期値が 980px なことが関係していると思います。

手っ取り早く検証するため、マージンとパディングを全部消すと、245pxに境界がありました。
これは、980*0.25=245 となり、観測とぴったり合います。

マージンとパディングが30pxなので、30+30+980+30+30=1100px、11000.25=275px となりそうですが、どうやらmargin-right部分を無視しているようです。
30+30+980+30+0=1070px、10700.25=267.5px と観測に合う感じです。

投稿2021/03/27 07:00

Lhankor_Mhy

総合スコア36960

jinn614

2021/03/27 07:31

僕が知りたかった事を理解してくれて説明していただいてくれている事はわかりました！ありがとうございます！まだ勉強が足りないので説明していただいている内容を完全には理解できていませんが、viewportのタグ入れるとウインドウ幅をかなり小さくしてもwidth100%が聞いてはみ出さなくなったのと、自分でも調べている時にこのへんが関係しているのか...な....?くらいの認識はあったので、やっぱりそうなのか！と確信することができました。説明していただいた文章内容を元に検索して理解を進めていけそうです！ありがとうございます！！