50651


固定widthの親要素内で、子要素のmin-widthを指定してmin-
width〜親のwidth内でスケールさせたいのですが、以下のコードだと子要素がmin-widthを無視して親要素と同じ幅になってしまいます。  
どなたか解決策をご存知の方いらっしゃいましたら、ご教示ください。

[code]

    <div class="parent">
        <div class="child"></div>
    </div>
    
    .parent {
        width: 500px;
    }
    .child {
        min-width: 300px;
        max-width: 500px;
    }
    
[/code]


CC BY-SA 4.0
2018-11-26T15:25:51.803
50648
2018-11-26T18:23:55.450
2018-11-26T18:23:55.450
3054
31166
question
html css
固定widthの親要素内の子要素でmin-width指定


`div` 要素の標準は `display: block` なので、何も指定しないと幅は親要素一杯に広がります。[`display`
プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/display)を `inline-block`
や `table` などにすると、中身に応じて幅が伸縮します。

[code]

    .parent {
        width: 500px;
        background-color: darkblue;
    }
    
    .child {
        display: inline-block;
        min-width: 300px;
        max-width: 500px;
        font-size: 16px;
        background-color: yellow;
    }
[/code]

[code]

    <div class="parent">
        <div class="child">child 1</div>
        <div class="child">child 2 ##################################</div>
        <div class="child">
            child 3
            =====================================================
        </div>
    </div>
[/code]


CC BY-SA 4.0
2018-11-26T18:22:56.750
50651
2018-11-26T18:22:56.750
3054
50648
answer