Flex-Box: flex-schrumpfen und Flex-Wrap funktioniert nicht wie erwartet

Question

Mein Problem lässt sich am besten mit diesem Beispiel erklärt werden: [JSFiddle]

#flex-container-1 { /*has 10 items*/ 
    flex-wrap: no-wrap; 
} 

#flex-container-2 { /*has 10 items*/ 
    flex-wrap: wrap; 
} 

#flex-container-3 { /*has 11 items*/ 
    flex-wrap: wrap; 
} 

Ich habe drei Behälter, von denen zwei Funktion wie erwartet. Aber das dritte schrumpft nicht das 11. Element, sondern hängt es außerhalb des Containers an.

Gibt es eine Möglichkeit, die Artikel im dritten Container zu verkleinern, damit sie nicht überläuft?

[JSFiddle] https://jsfiddle.net/fpcz3ghc/1/.

Die Höhe des Containers sollte festgelegt werden.

Answer 1

Definieren Sie die feste Höhe nicht auf .flex-item. Stellen Sie stattdessen max-height:50px; ein.

Versuchen Sie, die folgende Lösung:

.flex-container { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: black; 
 
    display: flex; 
 
    margin: 50px; 
 
} 
 
#flex-container-1 { 
 
    flex-wrap: no-wrap; 
 
} 
 
#flex-container-2 { 
 
    flex-wrap: wrap; 
 
} 
 
#flex-container-3 { 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    max-height:50px; 
 
    flex-basis: 50px; 
 
    background-color:red; 
 
    border-radius: 20px; 
 
}

<div id="main"> 
 
    <div id="flex-container-1" class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    </div> 
 
    <div id="flex-container-2" class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    </div> 
 
    <div id="flex-container-3" class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    </div> 
 
</div>