固定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;
    }