Shortcut for h="auto" + alignSelf: stretch on ActionIcon in <Group> | Mantine | Page 1

kind hatch Feb 21, 2025, 3:12 PM

#

<Group>
  <SomeTallElement/>
  <ActionIcon h="auto" style={{ alignSelf: "stretch" }}>...</ActionIcon>
</Group>```
This code does what i'm looking for, it makes the `ActionIcon` fill the vertical space to be as tall as `SomeTallElement`, but i'm wondering if there is a smarter or built-in way to do this.

formal prairie Feb 21, 2025, 4:21 PM

#

Instead of setting align-self: stretch to the children, you can set align-items: stretch to the parent

#

So basically ```js
<Group align="stretch">
<SomeTallElement/>
<ActionIcon>...</ActionIcon>
</Group>

kind hatch Feb 21, 2025, 10:53 PM

#

formal prairie So basically ```js <Group align="stretch"> <SomeTallElement/> <ActionIcon>.....

it still doesn't work without h="auto" on the ActionIcon =/

#

because ActionIcon has a fixed, CSS variable driven height by default

#

but it does make the overall code slightly better since it doesn't need a manual style attribute anymore.

#Shortcut for h="auto" + alignSelf: stretch on ActionIcon in <Group>