桌面上的Flexbox在Firefox中不起作用

我尝试了几种变体,包括:

使用flex-grow,flex-shrink和flex-basis个别.

使用像素flex-basis代替百分比.

用table-layout: fixed.

我在这里看到没有记录这个:https://github.com/philipwalton/flexbugs并在其他地方干了.有谁知道发生了什么？

这是因为,根据CSS表,当表格元素不是表的子元素时,应该生成匿名表对象:

根据Flexbox Last Call Working Draft,匿名表是什么成为flex项,而不是表单元格:

某些值会display触发在原始框周围创建匿名框.它是最外层的盒子 - 灵活容器盒的直接子盒 - 成为一个弹性项目.例如,给定两个连续的子元素display: table-cell,围绕它们生成 的匿名表包装盒[CSS21]成为弹性项.

由于表格单元格不是弹性项目,因此忽略了该flex属性.它将应用于匿名表,但CSS选择器无法选择匿名元素.

但是,Chrome不同意该规范并决定封锁表格单元格.

然后CSS工作组决定标准化Chrome的行为:

如果您有一个Flex容器,并且在其中放置了两个表格单元格,则它们不会独立地成为弹性项目.他们将包装在一个匿名表中,这将是flex.

但是,Chrome已经实现了它,因此每个项目都是独立的灵活项目.[...]因此它将表格单元格变成了块.

我在会议上看到过至少一个演示文稿,他们利用这个演示文稿为flex创建了后备行为.[...]如果你不是试图触发回退,我不知道你为什么要把一堆表格单元放在flex中并用匿名的东西包裹起来.[...]

解决:只是阻止flex和grid容器的子代.不要做匿名的盒子修复

在第一Flexbox的候选推荐标准发布与新决议:

某些值display通常会触发在原始框周围创建匿名框.如果这样的框是弹性项,则它首先被阻塞,因此不会发生匿名框创建.例如,两个连续的柔性物品与 display: table-cell将成为两个独立的柔性物品,而不是被包裹成一个单一的匿名表.display: block

然后Firefox实现了从版本47开始的新行为(错误1185140).

对于旧版本,您可以手动将单元格设置为块:

.flex-container > td {
  display: block;
}

* {
  box-sizing: border-box;
}
table{
  border: 1px solid #ddd;
  width: 100%;
}
tbody {
  background: #fff;
}
tr {
  display: flex;
}
td {
  display: block;
}
td:first-child {
  flex: 1 1 80%;
  background: mistyrose;
}
td:nth-child(2){
  flex: 0 0 10%;
  background: Aquamarine;
}
td:nth-child(3){
  flex: 0 0 10%;
  background: pink;
}

  

    

      
Ted
      
1
      
100%
    
    

      
Turd Ferguson
      
2
      
65%
     
    

      
Hingle McKringleberry
      
3
      
99%
     
  

td:first-child  { display: flex; }
td:nth-child(2) { display: flex; }
td:nth-child(3) { display: flex; }