CSSでWidthをpx指定しているのに、指定サイズより幅が小さくなる

画像のように赤いところがwidth300px指定されているのにも関わらず、
実際は300pxに満たない180pxくらいのサイズで表示されてしまいます。

これはどうしてなのでしょうか？そして、どうすれば治るのでしょうか？

ちなみに、一番右に１０px緑の幅が設けられていますが、あれはあれで必要なため気になさらずに。。。。。
class名もひどいことになっていますが、あくまで掲載用の仮のclass名となっております。。。。。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="normalize.css" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>

    <div class="container">


        <main class="main">
            <div class="left">
                W:150px
            </div>

            <div class="right">

                <div class="right-container">

                    <div class="right-inner">

                        <div class="right-inner-block1">
                            Width:300pxなのに300pxもない。。。
                        </div>

                        <div class="right-inner-block2">
                            Width:100%
                        </div>

                    </div>

                </div>

            </div>

        </main>

    </div>

</body>
</html>

* {
    box-sizing:border-box;
}

html {
    height: 100%;
}

body {
    background: #000000;
    height: 100%;

}

.container {
    display: flex;
}


    .main {
        display: flex;
        width: 100%;
    }
    
        .left {
            width: 150px;
            background: orange;
        }
    
    
        .right {
            width: 500px;
            background: green;
        }
    
    
        .right-container {
            width: 490px;
            background: #1e1e1e;
            border-right: solid 1px #000000;
        
        }
        
            .right-inner {
                display: flex;
                width: 490px;
                height: 300px;
            }
            
                .right-inner-block1 {
                    width: 300px;
                    background: red;
                }
                
                .right-inner-block2 {
                    width: 100%;
                    background: yellow;
                
                }

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

回答2件

ベストアンサー

これで縮まないと思います。

CSS
1.right-inner-block1 {
2    flex-shrink: 0;
3}

追記：

【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

投稿2017/09/17 06:14

編集2017/09/17 06:44

kei344

総合スコア69583

退会済みユーザー

2017/09/17 06:42

ご回答ありがとうございます。flexを使う前にflexの使い方を勉強しないといけないってことですね！すみません！

退会済みユーザー

2017/09/17 06:46

ありがとうございました。無事、対応できました。

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

css
1.right-inner-block2 {
2    width: 100%;
3    background: yellow;
4}

↓↓↓↓↓↓↓↓↓↓↓

css
1.right-inner-block2 {
2    flex: 1;
3    background: yellow;
4}

投稿2017/09/17 06:13

obon_t

総合スコア52

退会済みユーザー

2017/09/17 06:42

ご回答ありがとうございます。flexを使う前にflexの使い方を勉強しないといけないってことですね！すみません！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSSでWidthをpx指定しているのに、指定サイズより幅が小さくなる

関連した質問