弹性盒尺寸适合儿童答案

【问题标题】：Flex-box sizing to children弹性盒尺寸适合儿童
【发布时间】：2019-05-07 06:25:39
【问题描述】：

我有一个使用 Angular Material 和 Flex-box 的 Angular 网页。此页面将有一个保留其比例的图表，因此设置了最大宽度以防止它占用过多的垂直空间。我想将图形的父 div 设置为仅占用与子元素一样多的水平空间。我将使用具有 fxLayout 列并垂直拉伸的 div 填充水平空间的其余部分。

目前

<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，以便它继续填充剩余空间。

<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>

【问题讨论】：

你可以使用flex-grow来自动适应这个。
只需将 flex-grow 1 添加到该行的最后一列，它会自动使第一列成为其内容的大小，然后使第二列填充剩余空间（如果父行是弯曲）
我试过这个。它只会将图形一直向左挤压。
好的。使用 flex-gow（在有角度的情况下，fxFlex-“grow”），让我完成了我想要完成的一半。它将左侧 div 锁定到组件的最小宽度。现在，如果增加视图区域，右 div 继续填充，但左 div 保持不变。我的目标是让左 div 灵活，直到它达到子组件的最大宽度并且右 div 有增长的能力。我可能需要重新考虑我的布局。

标签： css angular flexbox

【解决方案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>

【讨论】：