2

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

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    width: 500px;
}
.child {
    min-width: 300px;
    max-width: 500px;
}

1 件の回答 1

2

div 要素の標準は display: block なので、何も指定しないと幅は親要素一杯に広がります。display プロパティinline-blocktable などにすると、中身に応じて幅が伸縮します。

.parent {
    width: 500px;
    background-color: darkblue;
}

.child {
    display: inline-block;
    min-width: 300px;
    max-width: 500px;
    font-size: 16px;
    background-color: yellow;
}
<div class="parent">
    <div class="child">child 1</div>
    <div class="child">child 2 ##################################</div>
    <div class="child">
        child 3
        =====================================================
    </div>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。