css grid неправильно работает

Здравствуйте!

Подскажите как решить вопрос.

Собственно вопрос в том — делаю grid:

#container{
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 700px);
 }

Структура такая:

<section id="container">
        <aside id="nav">
                Lorem ipsum dolor sit amet
        </aside>
    <section id="content">
                Lorem ipsum dolor sit amet
        </section>              
</section>

Оно вроде и работает , НО при уменьшении экрана вначале уменьшается  по ширине #content , а затем уже в конце начинаем уменьшаться и #nav — вопрос в том — как сделать чтоб уменьшались одновременно по ширене оба элемента grid ?