Rozważ następujący fragment:
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
}
<div class="parent">
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>
W przeglądarce Chrome tekst jest zawijany zgodnie z oczekiwaniami:
Ale w IE11 tekst się nie zawija :
Czy to znany błąd w IE? (jeśli tak, wskaźnik zostanie doceniony)
Czy istnieje znane obejście?
To podobne pytanie nie ma jednoznacznej odpowiedzi i oficjalnej wskazówki.
css
internet-explorer
flexbox
internet-explorer-11
Misha Moroshko
źródło
źródło
align-items: center
elementu nadrzędnego. Wydaje się, że to jest przyczyną tegoOdpowiedzi:
Dodaj to do swojego kodu:
Wiemy, że dziecko na poziomie bloku ma zajmować całą szerokość rodzica.
Chrome to rozumie.
IE11, z jakiegokolwiek powodu, żąda wyraźnego żądania.
Używanie
flex-basis: 100%
lubflex: 1
też działa.Pokaż fragment kodu
Uwaga: czasami konieczne będzie posortowanie różnych poziomów struktury HTML, aby określić, do którego kontenera pobierany jest plik
width: 100%
. Zawijany tekst CSS nie działa w IEźródło
flex: 1 1 50%; display: flex; align-items: center;
:. Nic dziwnego, że IE nie działa podczas zawijania długich tekstów w komórkach. Ustawieniewidth:100%
działa, alemin-width: 100%
nie działa ! Powinno, ale tak nie jest. t (jak wszystkie rzeczy IE), więc spróbowałemmax-width: 99%
i zaskakująco, to robi pracę myślę użyciu.width:100%
może być lepiej?flex-direction: column
na rodzica, aby to zadziałało.Miałem ten sam problem i chodzi o to, że element nie dostosowywał swojej szerokości do kontenera.
Zamiast używać
width:100%
, bądź konsekwentny (nie mieszaj modelu pływającego i modelu flex) i używaj flex, dodając to:Lub:
To zadziałało dla mnie.
źródło
Jak zasugerował Tyler w jednym z komentarzy tutaj, używając
na dziecko może pracować (pracował dla mnie). Używanie
align-self: stretch
działa tylko wtedy, gdy nie używaszalign-items: center
(co zrobiłem).width: 100%
działa tylko wtedy, gdy nie masz wielu potomków w swoim flexboxie, które chcesz pokazać obok siebie.źródło
Cześć ode mnie musiałem zastosować 100% szerokości do jego elementu dziadka. Nie jego elementy potomne.
źródło
Jakoś te wszystkie rozwiązania nie działały dla mnie. Widać wyraźnie błąd w IE
flex-direction:column
.Działa dopiero po usunięciu
flex-direction
:źródło
Proponowane rozwiązania nie pomogły mi z ".child {width: 100%;}", ponieważ miałem bardziej skomplikowane znaczniki. Jednak znalazłem rozwiązanie - usuń "align-items: center;" i działa to również w tym przypadku.
źródło
align-items: center
. Zobacz stackoverflow.com/a/39365207/630170Jedynym sposobem, w jaki w 100% konsekwentnie udało mi się uniknąć tego błędu kolumny flex-direction, jest użycie zapytania o media o minimalnej szerokości w celu przypisania maksymalnej szerokości do elementu podrzędnego na ekranach o rozmiarze pulpitu.
Będziesz musiał ustawić naturalnie wbudowane elementy potomne (np.
<span>
Lub<a>
) na coś innego niż inline (głównie display: block lub display: inline-block), aby poprawka działała.źródło
Nie znalazłem tutaj swojego rozwiązania, może komuś się przyda:
Powodzenia!
źródło
To zadziałało dla mnie.
źródło
Ja też napotkałem ten problem.
Jedyną alternatywą jest zdefiniowanie szerokości (lub maksymalnej szerokości) w elementach potomnych. IE 11 jest trochę głupi, a ja poświęciłem 20 minut na zrealizowanie tego rozwiązania.
źródło
Miałem podobny problem z przepełnionymi obrazami w opakowaniu elastycznym.
Dodanie albo
flex-basis: 100%;
czyflex: 1;
dziecku przepełnione fixed pracował dla mnie.źródło
Po co stosować skomplikowane rozwiązanie, jeśli proste też działa?
źródło