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

Question

我有一个 flex 容器，有 2 children.

其中一个设置为flex-grow: 1，以尽可能多地使用space。另一个 child 不适合它的内容（我试过 flex-shrink: 0），内容是 CSS 网格。

如何使两个 children 都具有各自内容的最小宽度，同时保持当前结构，其中一个 child 占用尽可能多的宽度？

Answer 1

这种风格是错误的

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

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

将其更改为这样，您在考虑到差距后使用可用的space：

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

css grid element inside flex element doesn't overflow container