html - 带有 flex 的滚动自动 div 中的宽表，缺少一些 col 标签样式

Question

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

哪些浏览器:

我在 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;
}

<div class="wrap">
<table>
  <colgroup>
    <col span="20">
    <col span="2" class="bg-warning">
  </colgroup>
  <thead>
    <tr>
      <th colspan="2">Category 1</th>
      <th colspan="2">C1</th>
      <th colspan="2">Some long name category</th>
      <th colspan="2">Category 10</th>
      <th colspan="2">klj kwjbhd ejk </th>
      <th colspan="2">Something else</th>
      <th colspan="2">Maybe something more</th>
      <th colspan="2">And so on</th>
      <th colspan="2">Something weird</th>
      <th colspan="2">Other stuff</th>
      <th colspan="2">Not done by Test Company 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
      <td >#</td>
      <td >Amount</td>
    </tr>
  </tbody>
</table>
</div>

如您所见，bg-warning 类未应用于最后一个表格列(2 colspan)，问题仅出现在 chromium 浏览器中，如上所述.

发生了什么，解决方法是什么:

当 width: 100% 的宽 table 位于 flex-column 内并且scroll auto div，它的宽度受限于屏幕大小，即使整个表格被渲染并且在滚动时我们可以看到整个表格。

这个问题通常不会引起注意，但是如果我尝试将一些 css 样式/类应用到最后 2 列，例如:

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

它们没有得到应用，如果我将 table 的 width css 属性从 100% 更改为，我的样式将被应用适合内容。 (这里是演示页面的 gif 解释:https://gifyu.com/image/luCZ)

问题还有很多，为了完整起见将其添加到这里，主要问题如上所述，应用了一个奇怪的部分 CSS 样式我无法在我的复制 HTML 演示中重新制作的滚动。它也消失了，请参阅下面的 gif 以了解一些理解。这是 gif:https://gifyu.com/image/luFZ

问题:

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

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

Answer 1

似乎已在最新版本的 chromium 中修复。

现在无法重现。所以关闭这个。不确切知道哪个 PR 或问题解决了这个问题。但它是固定的。