Display flex not getting 100% height in firefox

Question

I am trying to display a div instead of element in fullcalendar using html and css via jquery as follows:

$(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>");

And 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;
}

Although, its working fine as intended on chrome but not on other browsers such as firefox.

Chrome:

Firefox

Update:

If I inspect each container:

In 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>

But in case of firefox, its not showing inner element i.e div .booked

CODEPEN LINK

You can check this link its showing my problem, you can check in chrome and firefox.

CODEPEN LINK

You may need to give the parent container a `position` of `relative` — Smokey Dawson, Jun 21 '19 at 06:18
instead of height =100% try setting min-height, with a fixed say 50px; — akshay kishore, Jun 21 '19 at 06:32
@BhargavChudasama Please take a look I have updated it. If you need any more information please let me know — Aayush Dahal, Jun 21 '19 at 06:39
@Nimsrules Its not working with the suggested answers of min height — Aayush Dahal, Jun 21 '19 at 06:43
trying on jsfiddle at my firefox, it's working [proof](https://imgur.com/OOMFtks) — dooooooofai, Jun 21 '19 at 06:49
@dooooooofai it could have better if you had shared the link for jsfiddle. So that, it might be helpful for me. — Aayush Dahal, Jun 21 '19 at 06:50
what i do only copy paste you're code .. [fiddle](https://jsfiddle.net/jcns0myg/) — dooooooofai, Jun 21 '19 at 06:51
Now you can reference the codepen link, I have updated it in questions — Aayush Dahal, Jun 21 '19 at 07:08

score 1 · Accepted Answer · answered Jun 21 '19 at 07:25

1

What you mising is, you forget making the td height 100% too. So you need add css for the td. In my opinion, try to add this css

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

and it will work.

Already trying on the pen, and it's working. CodePen

answered Jun 21 '19 at 07:25

dooooooofai

88
1
15

Display flex not getting 100% height in firefox

Update:

1 Answers1