Button with icon in ButtonGroup floating right in a flexbox goes out of bounds

Atlassian Ecosystem Design
1

Hi all,

I have a problem with the button and button group component. I’m trying to use them inside a button group and that as the right element with some text to the left.

If I don’t give the button an icon, everything works as expected, but with an icon, the button goes out of bounds and I’m at a loss as to why.

I’m not sure if this is a bug in the component or if I’m just not using flexbox properly, so I thought I’d ask here first :confused:

Anyone have any ideas?

Cheers,
Tobias

2

One solution here: @atlaskit/button ButtonGroup with icon broken? - CodeSandbox

Basically:

  • For element that you want to grow to fit (In your case the left hand text element), remove “display:100%” and add “flex-grow:1”

I think the button is expanding after the first render, and the left hand element cannot shrink, causing the overflow.

I’m by no means a css expert, but hopefully it at least solves the problem.

1 Like
3

Works like a charm, thank you so much!!