flex元素内的css网格元素不会溢出容器

Question

我有一个有两个孩子的弹性容器。

其中一个设置为flex-grow: 1，以尽可能多地占用空间。 另一个孩子不适合其内容（我已尝试flex-shrink: 0），内容是CSS网格。

如何让两个孩子都拥有各自内容的最小宽度，同时保持当前结构中一个孩子尽可能宽的宽度？

codepen

Answer 1

这种风格错了

ninja-manager .ninja-manager__not-active__inner {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 30px;
}

因为它为列提供了50％的总宽度，另一方面，您在列之间设置了间隙。您使用的总宽度大于可用宽度。

将其更改为此，在考虑到差距后使用可用空间：

ninja-manager .ninja-manager__not-active__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
}

forked codepen