Das Problem ist, dass beim Hinzufügen von Auffüllungen zu einem Div, das Flexbox verwendet, diese über das übergeordnete Element hinausgehen, wenn die Breite des untergeordneten Elements 100% beträgt. Warum ist das so? Vielen Dank!
Ich habe festgestellt, dass das Problem durch Hinzufügen der Boxgröße behoben wird: border-box; oder durch Ändern von Flex: 0 0 100% in Flex: 0 1 100%? Welche Methode ist besser oder effizienter?
.row {
background: orange;
justify-content: space-between;
padding: 30px;
display: flex;
max-width: 600px;
margin: 0 auto;
flex-wrap: wrap;
}
.row>div {
flex: 0 0 31%;
padding: 30px;
}
.colLeft {
background: red;
}
.colRight {
background: blue;
}
@media only screen and (max-width: 630px) {
.row>div {
flex: 0 0 100%;
}
}<div class="row">
<div class="colLeft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="colRight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>Sie sagen, dass die Flex-Elemente 100% breit sein sollen (via flex-basis):
@media only screen and (max-width: 830px) {
.row > div {
flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
}
}
Sie geben jedem Artikel aber auch 60 Pixel in horizontaler Polsterung:
.row > div {
padding: 30px;
}
Nun, 100% + 30px + 30pxist größer als 100%, so dass es natürlich zu einem Überlauf kommt.
Sie können das Problem beheben, indem Sie das Box-Modell so einstellen, dass die Polsterlängen in die Breitenberechnung einbezogen werden.
Fügen Sie dies Ihrem Code hinzu:
.row > div {
box-sizing: border-box;
}
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen