Wir verwenden eckiges Material, um eine neue responsive Website zu erstellen.Angular Material flex = "50" nur für Layout = "row"
Zur Zeit verwenden wir nur die Flex-Layouts aus eckigem Material. Wir haben Code wie folgt aus:
<div layout="column" layout-gt-md="row">
<div flex="50">
Here's some text without a fixed length.
</div>
<div flex="50">
Here's some text without a fixed length.
</div>
</div>
In diesem Fall wollen wir erreichen, dass wir Reihen haben (von links nach rechts) auf großen Displays mit einer Breite von jeweils 50%. Aber das Problem ist: wenn es ein Medium oder ein kleineres Gerät ist, hat es 50% Höhe (max-height
um genauer zu sein), die etwas Überlappung mit dem anderen div
verursacht, da der Text länger ist als die 50% Höhe des div
.
Wie können wir erreichen, dass die flex="50"
nur für layout="row"
gilt und die Spaltenhöhe sich an die Inhaltsgröße anpasst? Aufschalten der CSS-Klasse zu
.layout-column > .flex-50 {
max-height: inherit;
}
funktioniert nicht.
Ich habe eine demo des Problems auf Plunker bereitgestellt.
Habe gerade deine Antwort bemerkt!Wie auch immer, schau dir meine aktualisierte Antwort an. Viel Glück! – Srijith
Ihre Lösung sieht auch interessant aus ... wir hatten immer eine Höhe von 100%, wenn wir die maximale Höhe irgendwie auf 100% setzen. Das bedeutet, es hatte zu viel Leerzeichen zwischen den Divs. –
Ja oder die 100% wurden um 33% überschrieben. Mein '! Wichtig' scheint die 100% aufzuheben – Srijith