带 Flex 的滚动自动 div 中的宽表，缺少一些 col 标签样式

Question

我在尝试使用colgroup和col标签对我的一个宽 html 表的最后两列进行样式设置时遇到了一个奇怪的问题。

哪些浏览器：

我在 2 个基于 chromium 的浏览器（google chrome 和 opera）上进行了测试，问题仍然存在。但在 Mozilla Firefox 上测试时，根本不存在问题。

问题：

经过大约一个小时的调试后，我设法解决了该问题，但我能够在原始 html 文档中重现该问题。可以在https://affectionate-lamport-fa8d14.netlify.app上查看完整内容，也可以在下面查看最小复制内容：

table, td, tr, th, {

  white-space: nowrap;

  font-size: inherit;

  font-size: 25px;

}

th, td {

  padding: 10px 22px;

  border: 1px solid black;

}

body {

  font-size: 25px;

}

table {

  width: 100%;

}

.wrap {

  overflow: auto;

  display: flex;

  flex-direction: column;

}

.bg-warning {

  background-color: orange;

}

正如您所看到的，bg-warning类没有应用于最后一个表列（具有 2 个 colspan），问题仅在 chromium 浏览器中出现，如上所述。

发生了什么事，解决方法是什么：

当一个宽的tablewithwidth: 100%位于aflex-column和scroll autodiv内时，它的宽度受限于屏幕尺寸，即使渲染了整个表格并且在滚动时我们可以看到整个表格。

这个问题通常不明显，但如果我尝试将一些 css 样式/类应用到最后两列，如下所示：

<colgroup>
  <col span="20">
  <col span="2" class="bg-warning">
  </colgroup>

它们不会被应用，如果我将widthcss 属性table从100%fromfit-content更改为 ，我的样式就会应用。（这里是演示页面的 gif 解释：https://gifyu.com/image/luCZ）

不过，这个问题还有更多，只是为了完整性而将其添加到此处，主要问题如上所述，滚动上应用了一个奇怪的部分 CSS 样式，我无法在我的再现 HTML 演示中重新生成该样式。它也会消失，请参阅下面的 gif 来了解一些内容。这是 gif：https: //gifyu.com/image/luFZ

问题：

对于此行为是否有一个众所周知的解释，它确实看起来像一个错误，如果它是一个错误，请确认并指导我在哪里报告此错误，如果它实际上是一个错误而不是一个错误，我想自己报告此错误某种已知的怪癖。

注意：仅回答重新生成的示例就足够了。