Hallo
Ich habe Website mit einem Container-div, welches die Eigenschaft "display: flex;" hat und zwei divs (ebenfalls beide "display: flex;") enthält. Eines dieser divs hat 4 inputs und 1 select, welche alle gleich breit dargestellt werden sollen:
#test input, #test select{
flex: 0 1 15%;
}
Hier gibt es eine Vorschau: https://codepen.io/Phippey/pen/apXRxd
Komischerweise wird flex-basis "ignoriert", d.h. die inputs sind grösser, als sie eigentlich sein sollten (wahrscheinlich die Standardgrösse). Das select, so scheint es, wird breiter, wenn flex-basis grösser wird. Sobald alle Elemente (select und inputs) die gleiche Grösse haben, wachsen sie gleichmässig (kann man sehen, wenn man das div vergrössert).
Interessanterweise tritt das Problem nicht auf, wenn man den inputs und dem select eine Breite von 0 zuweist:
#test input, #test select{
width: 0;
flex: 0 1 15%;
}
Es scheint zu funktionieren, aber warum genau? Ich nehme an, zuerst werden alles Elemente auf 0 und danach auf 15 % gesetzt. Aber warum klappt es nicht, wenn ich sie von Anfang an auf 15 % setzen möchte?
Vielen Dank für Antworten
Phippe