Флекс-бокс для детей

Question

У меня есть угловая веб-страница с использованием Angular Material и Flex-box.На этой странице будет график, который сохраняет свое соотношение и, следовательно, имеет максимальную ширину, установленную для предотвращения слишком большого вертикального пространства.Я хочу, чтобы родительский div графика занимал столько же горизонтального пространства, сколько дочерний элемент.Я заполню оставшуюся часть горизонтального пространства элементом div, имеющим столбец fxLayout и растянутым по вертикали.

В настоящее время

<div fxLayout="row">
    <div fxLayout="column" fxFlex>
        <app-graph></app-graph> //max-width: 1300px
        <app-results></app-results>
    </div>
    <div fxLayout="column" fxFlex="30" style="background-color: red;">

    </div>
</div>

Обновление

Я все ближе.Я обнаружил, что установка fxFlex = "0 1 1300px" дает мне поведение, которое я хочу от первого div.Я не могу понять, что делать со вторым делом, чтобы оно продолжало заполнять оставшееся пространство.

<div fxLayout="row">
    <div fxLayout="column" fxFlex="0 1 1300px">
        <app-graph></app-graph>
        <app-results></app-results>
    </div>
    <div fxLayout="column" fxFlex="20" style="background-color: red;">

    </div>
</div>

Answer 1

Это то, что я придумал, чтобы получить то, что я хотел.Все еще не идеально, но он сохраняет минимальный и максимальный размер первого компонента.

<div fxLayout="row" fxLayout.lt-md="column" fxLayout="start stretch">
    <div fxLayout="column" fxFlex="0 1 1100px" style="margin: 0 5px;">
        <app-graph></app-graph>
        <app-results></app-results>
    </div>
    <div fxLayout="column" fxFlex style="border: black solid 1px; margin: 0 5px;">
        <p style="font-size: 4em">Stuff will go here</p>
    </div>
</div>