rodzic nadrzędny flexbox mniejszy niż element potomny przy zmianie rozmiaru przeglądarki

Question

Dlaczego rodzic jest mniejszy niż dzieci na wąskich ekranach?

Zobacz fragment ... a następnie zmień rozmiar przeglądarki (szerokość), aby była mniejsza niż różowe pole. Powinien pojawić się pasek przewijania. Przewiń w prawo na stronie i zauważ, że zielone tło jest mniejsze niż różowy obszar, a po prawej jest biały punkt.

więc kilka pytań:

1. Dlaczego tak się dzieje?

2. Jak mogę zapobiec nadrzędnego div za zielone tło z coraz mniejszy niż różowym pudełku/div gdy przeglądarka jest zmieniany bez ustawienie wyraźne szerokość na rodzica (lub gdziekolwiek indziej) lub przy użyciu overflow:hidden?

3. Czy istnieje rozwiązanie Flexbox tego problemu?

Dzięki

Thomas

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 

 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

Answer 1

1. Zdarza się, ponieważ .parent to normalny element bloku (flex jest również pojemnik na poziomie bloków) i zostało zainicjowane za pomocą width:auto;, która jest w twoim przypadku szerokością widoku. Tak więc przewijanie w prawo spowoduje wyświetlenie spacji, ponieważ szerokość div jest mniejsza niż cały przewijany obszar.

2. Zrobisz to, ustawiając .parent na element śródliniowy, który odpowie na szerokość swoich dzieci.

3. Tak, po prostu użyj display: inline-flex; na .parent.

.parent { 
 
    height: 400px; 
 
    width: 100%; 
 
    background-color: green; 
 
    display: inline-flex; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

Zobacz display property na w3schools.

Answer 2

Elementy elastyczne domyślnie nie mogą być mniejsze niż ich zawartość. Dlatego też, podczas gdy rodzic może się skurczyć, elementy elastyczne nie mogą się kurczyć po długości tekstu. Powoduje to przepełnienie i, w rezultacie, kolumnę białej przestrzeni poniżej.

Początkowe ustawienie elementów elastycznych to min-width: auto. Aby każdy element pozostał w kontenerze, przełącz na min-width: 0.

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    min-width: 0; /* NEW */ 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

Teraz różowe pola nie są już przepełnione pojemnik.

Jednak tekst jest teraz przepełniony przez różowe pudełka.

Pytanie nie określa zachowanie dla tekstu, ale tutaj jest jednym z możliwych rozwiązań:

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    min-width: 0;   /* NEW */ 
 
    text-overflow: ellipsis; /* NEW */ 
 
    white-space: nowrap;  /* NEW */ 
 
    overflow: hidden;  /* NEW */  
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>