如何让break-inside与display: contents属性兼容生效？

我希望每个<section>的内容在容器的网格中布局，同时要确保<section>的内容内部不会出现分页符。

遗憾的是这无法实现，因为给<section>设置display: contents后，它仿佛不存在一般，会忽略break-inside: avoid的作用。

示例代码 #

CSS #

main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 20px;
}

section {
  display: contents;
  break-inside: avoid;
}

.foo {
  grid-column: 1;
}

.bar,
.baz {
  grid-column: 2;
}

HTML #

<main>
  <section>
    <div class="foo">foo</div>
    <div class="bar">bar</div>
    <div class="baz">baz</div>
  </section>
  <section>
    <div class="foo">foo</div>
    <div class="bar">bar</div>
    <div class="baz">baz</div>
  </section>
</main>

内容的提问来源于stack exchange，提问作者Chris_F