Question

我想要一张类似于日历的表格（不幸的是我需要使用表格标记）。它由几周的行组成，每行有7个单元格 - 天。单个单元格需要包含：

任务列表（从0到n个条目）
一个数字，表示它的天数。

无论是否有任何任务，数字必须始终位于单元格的最底部。任务，如果有的话，必须从单元格的顶部开始。由于设计的外观，单元还需要具有最小高度。单元格内容应该没有滚动条。

我使用flex创建了一个简单的解决方案，并为height设置了<td>（您可以在下面的代码段中看到过于简化的版本），但它在Chrome，IE和Edge，但在Firefox中不起作用。

td {
  border: 1px solid #e6e6e6;
  height: 45px;
}

.task {
  display: block;
}

.day-contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

<table>
  <tr>
    <td>
      <div class="day-contents">
        <div class="tasks">
          <a href="#" class="task">Task 1</a>
          <a href="#" class="task">Task 2</a>
        </div>
        <span class="day">1</span>
      </div>
    </td>
    <td>
      <div class="day-contents">
        <div class="tasks">
          <a href="#" class="task">Task 3</a>
        </div>
        <span class="day">2</span>
      </div>
    </td>
    <td>
      <div class="day-contents">
        <div class="tasks"></div>
        <span class="day">3</span>
      </div>
    </td>
  </tr>
</table>

似乎Firefox“忘记”调整第一个单元格的大小以匹配其内容的高度。如果我从height: 100%;删除.day-contents，那么Firefox现在会调整第一个单元格的大小，但现在只有最高的单元格符合我在第二段中描述的定位规范。

这是Firefox中的错误还是我不小心使用浏览器可以按照自己的意愿解释的某种未定义行为？我有什么可以使用的解决方法吗？

Flexbox在最小高度的桌子内

0 个答案: