Pro karty používám CSS Grid, takže karty jsou stejně vysoké. Výška vnitřního kontejneru pro nadpis obrázek a text se přizpůsobovala podle výšky obsahu a když byl text nebo obrázek kratší, tak se mi kontejner nevytáhl na celou výšku karty.
Vyřešila jsem to tak, že jsem vnitřnímu kontejneru nastavila CSS vlastnost height na 100% a vlastnost display na table. A myslela jsem, že je hotovo. Jenže prohlížeč Mozilla Firefox byl jiného názoru. Vlastnost height: 100% sice vytáhla kontejner až na vnější výšku celé karty podobně jako v Chromu a Edgi, nicméně vlastnost display: table, která kontejner u zmíněných prohlížečů natlačila zpět dovnitř karty, neměla ve Firefoxu žádný efekt.
Zkusila jsem si karty znovu postavit v prostředí codepen.io a doufala jsem, že jsem jen někde něco přehlédla a že to takto třeba objevím. Jenže i zde se to chovalo naprosto stejně. Chrome a Edge v pořádku ale Mozilla Firefox viz obrázek níže.
Zkusila jsem googlovat. V takovýchto případech se většinou objeví nějaké užitečné řešení ze serveru stackoverflow.com. Tentokrát ale žádný můj dotaz k nalezení příčiny a řešení nevedl. Nakonec jsem tedy na stackoverflow.com svůj problém popsala a požádala komunitu o pomoc.
Do dvou dnů jsem měla dvě pěkná plně funkční řešení. První bylo založené na nahrazení vlastnosti height: 100% vlastností height: -webkit-fill-available, o které jsem ani nevěděla, že existuje. Druhé doporučovalo odstranění použitých CSS vlastností kontejneru height: 100% a display: table a pouze nastavit display: flex kartám. Jak jednoduché a elegantní.
Člověk dnes nemusí být geniální programátor, stačí je zadat správný dotaz online. I love it ❤.