Flexbox 中的 CSS 网格突然中断答案

【问题标题】：CSS grid inside Flexbox suddenly breaksFlexbox 中的 CSS 网格突然中断
【发布时间】：2021-03-30 04:06:06
【问题描述】：

所以我有 .articleWrapper 用于发布子项目，可以按照我想要的方式进行缩放。然而，将这个 .articleWrapper 放在另一个带有 dipslay: flex 的 wrapper-element 中会突然破坏 .articleWrappers 在某个点后水平缩放的能力。

我的逻辑一定有问题，但我找不到。

下面是代码。如果我删除 display: flex 和 flex-wrap: wrap;网格工作正常。此外，如果我用块替换 flex，它工作正常。如果我把 display: flex;返回网格内容不再堆叠。

.siteWrapper {
    display: flex;
    flex-wrap: wrap;
}

.articleWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(285px, 1fr));
    max-width: 1100px;
    margin: auto;
}

article {
    background-color: red;
}

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="siteWrapper">
    <div class="articleWrapper">
        <article>
           <h1>Title</h1>
           <p>Para</p>
        </article>
        <article>
            <h1>Title</h1>
            <p>Para</p>
         </article>
    </div>
</div>
</body>

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
对不起。新的stackoverflow :)。我现在能够用这么多的代码重现问题。
我们不能，所以请添加您的 HTML
添加了 HTML 并试图找到这一次的最低限度。
好的哇。我不知道 Stackoverflow 也可以在 sn-ps 中运行我的代码！这很整洁。

标签： html css flexbox css-grid

【解决方案1】：

似乎我自己找到了一种解决方案，但我仍然不明白它为什么有效。添加宽度：100%； to .articleWrapper 似乎已经解决了这种情况下的问题。

【讨论】：