Display Flex在Firefox中未达到100％的高度

Question

我正在尝试通过jQuery使用html和css显示div而不是fullcalendar中的元素，如下所示：

$(element).css("display", "none");
                        $('.fc-day[data-date="' + event.start.format("YYYY-MM-DD") + '"]').append("<div class='booked'><span>Booked <br><small>for date</small></span></div>");

和CSS

.booked{
  display: -webkit-box;      
  display: -moz-box;       
  display: -ms-flexbox;   
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #CD5C5C;
  cursor: not-allowed;
  pointer-events: none;
  color: #fff;
}

尽管如此，它可以在chrome上正常运行，但不能在其他浏览器（如firefox）上运行。

Chrome浏览器：

Firefox

更新：

如果我检查每个容器：

在Chrome浏览器中

<td class="fc-day fc-widget-content fc-sun fc-future" data-date="2019-06-23">
    <div class="booked"><span>Booked <br><small>for date</small></span></div>
</td>

但是在使用Firefox的情况下，它不显示内部元素，即div .booked

CODEPEN LINK

您可以检查此链接以了解我的问题，也可以检查chrome和firefox。

CODEPEN LINK

Answer 1

您所误解的是，您也忘记将td高度也设置为100％。因此，您需要为td添加CSS。我认为，请尝试添加此CSS

.fc-bg td {
height: 100%;
 }

，它将起作用。

已经在尝试使用笔，并且可以正常工作。 CodePen