带 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问题：对于此行为是否有一个众所周知的解释，它确实看起来像一个错误，如果它是一个错误，请确认并指导我在哪里报告此错误，如果它实际上是一个错误而不是一个错误，我想自己报告此错误某种已知的怪癖。注意：仅回答重新生成的示例就足够了。