Button läuft über Tabellenzelle hinaus

[Rolf B]

Hallo Pit,

in der 1. Variante wird die Höhe der Buttons durch den Text darin bestimmt, in der 2. Variante setze ich nur eine minimale Höhe und lasse, wenn Platz genug ist, über die Flexbox die Buttons auf die Höhe des Containers verteilen. Das wird durch die Kombi-Eigenschaft flex: 1 0 1.5em; in den Buttons gesteuert, die bildet eine Zusammenfassung von flex-grow, flex-shrink und flex-basis. Mit flex-basis legst Du die Ausgangsgröße eines Elements fest (hier die Höhe, weil die Flexbox wegen flex-direction:column vertikal anordnet). Mit flex-grow bestimmst Du, wie das Element wachsen soll wenn mehr Platz da ist als flex-basis verlangt, und flex-shrink ist analog bei zu wenig Platz. Schau Dir die Beschreibung dieser Attribute im Wiki an, mach Dir ein Fiddle oder einen Codepen und spiel eine Weile damit herum. Sonst bekommt man einen Knoten ins Hirn :)

Variiere in den Fiddles mal die Anzahl der Buttons (=Termine), von 0-9 oder so, dann siehst Du den Unterschied zwischen den Varianten. Was für dich besser passt, ist deine Entscheidung.

Setzen von Breiten und Höhen gelingt jederzeit mit den entsprechenden width/height/max-width/max-height Eigenschaften. Spiel doch einfach mal damit rum, dann siehst du es schon. Anders mach ich das auch nicht.

Was meinst Du mit „den VP-Maßen anpassen“? Viewport? Fragst Du gerade, wie man ein HTML Element den Maßen seines Parent-Elements anpasst? Oder verstehe ich Dich nur miss?

Rolf