Elementy Flex ignorują wyrównywanie procentów w Firefoksie

Question

Próbuję dodać dopełnienie do elementu wewnątrz elementu display:flex. Kiedy dopełnienie jest zdefiniowane jako procent, nie wyświetla się w przeglądarce Firefox, chociaż ma to miejsce w przypadku zdefiniowania w px. Oba przypadki działają zgodnie z oczekiwaniami w Chrome.

div { 
 
    background: #233540; 
 
} 
 
div > div { 
 
    color: #80A1B6; 
 
} 
 
.parent { 
 
    display: flex; 
 
} 
 
.padded { 
 
    padding-bottom: 10%; 
 
}

<div class="parent"> 
 
    <div class="padded"> 
 
     asdf 
 
    </div> 
 
</div>

Chrome:

Firefox:

Edytuj: Może to wynikać z decyzji Mozilli o interpretacji pionowych wartości procentowych względem wysokości kontenera nadrzędnego. Wydaje mi się szalony. https://bugzilla.mozilla.org/show_bug.cgi?id=851379

Edycja 2: Tak, wydaje się, że spec faktycznie definiuje pionową wyściółkę i margines jako rozwiązane przed wysokości kontenera, więc może Chrom jest jednym niedotrzymywanie spec? https://drafts.csswg.org/css-flexbox/#item-margins

Answer 1

Zobacz https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html

tabeli/Flex Procenty

• Grupa próbowała pracować przez jaki pionowe marginesy i podkładki odsetek są zdefiniowane.
  • Uwaga: górny i dolny margines w CSS tradycyjnie rozwiązany przed szerokości bloku zawierającego zamiast jego wysokości, która posiada kilka użytecznych efektów, ale jest ogólnie zaskakujące. Istniejące tryby układu muszą oczywiście kontynuować to.
  • Poprzednia rezolucja grupy dotyczyła opcji 2 (poniżej), ale Google uznał, że mają nowe informacje dotyczące abspos zachowania, które zasługują na ponowne rozpatrzenie.
  • Dyskusja sprowadza się do trzech potencjalnych rozwiązań:
    • Wariant 1: Zawsze rozwiązać procentach w stosunku do szerokości.
    • Opcja 2: Rozgraniczenie siatki i giętki względem wysokości i elementy o wartości abonamentowej zawsze są rozdzielane na szerokość.
    • Opcja 3: Siatka i flex, łącznie z ich elementami abspos, rozstrzygnij przeciwko wzrostowi. Abspos gdzie indziej nadal rozwiązywać w stosunku do szerokości.
  • W sondażu słomy grupa była dość równo podzielona pomiędzy opcji 1 i 3.
  • Microsoft będzie sprzeciwiał się opcji 1 i Google do wariantu 3, więc dyskusja w impasie i będą kontynuowane prywatnie podczas F2F w nadziei na wyciągnięcie wniosku.

Zobacz https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html,

schematu flexbox% follow-up

• [...] nadal nie było konkluzja.

Obecny Flexbox spec ostrzega o tym:

marże procentowe i podkładki na flex items można rozwiązać przeciwko obu:

• własnej osi (lewy/prawy procentowe zdecydowania wobec szerokość, góra/dół rozdzielają się względem wysokości)
• oś rzędna (lewa/prawa/góra/bo ttom procent wszystkich rozstrzygnąć przeciwko szerokości)

Użytkownik użytkownika musi wybrać jedno z tych dwóch zachowań.

Uwaga: Ta rozbieżność jest do bani, ale to dokładnie oddaje aktualny stan świata (brak konsensusu implementacji, a nie konsensusu w CSSWG). Intencją CSSWG jest, aby przeglądarki zbiegały się na jednym z zachowań, w którym to czasie specyfikacja zostanie zmieniona, aby wymagać tego.

Autorzy powinni unikać procentowe w uszczelek lub marże na flex items całkowicie, ponieważ będą one uzyskać różne zachowanie w różnych przeglądarkach.

Answer 2

Dla mnie to załatwia sprawę: dodanie wyświetlacza: tabela do elementu div. Nie wiem, czy to powoduje inne problemy.

div { 
 
     background: #233540; 
 
     display: table; 
 
    } 
 
    div > div { 
 
     color: #80A1B6; 
 
    } 
 
    .parent { 
 
     display: flex; 
 
    } 
 
    .padded { 
 
     padding-bottom: 10%; 
 
    }

<div class="parent"> 
 
     <div class="padded"> 
 
      asdf 
 
     </div> 
 
    </div>

Answer 3

Spróbuj tego:

.padded { 
    padding-bottom: 10vw; 
}