Button with Theme tertiary-inline too small in flexbox

[stefanbrenner]

Buttons with the ButtonVariant.LUMO_TERTIARY_INLINE are too small if they are placed inside of an flexbox.

    Div flexbox = new Div();
    flexbox.getStyle().set("display", "flex");
    flexbox.getStyle().set("flex-flow", "row nowrap");
    add(flexbox);

    TextField tf = new TextField();
    tf.setWidthFull();

    Button b1 = new Button();
    b1.setIcon(VaadinIcon.USER.create());
    b1.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
    b1.getStyle().set("outline", "auto");

    Button b2 = new Button();
    b2.setIcon(VaadinIcon.USER.create());
    b2.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
    b2.getStyle().set("outline", "auto");

    flexbox.add(tf, b1, b2);

I expect the ouline of the two buttons to be rectangular and not 'clipped':

I think the problem is min-width: 0 at the vaadin-button. If I change it to auto it works:

:host([theme~='tertiary-inline']) {
    min-width: auto;
}

[vursen]

@jouni The suggested solution might be a good alternative to min-width: 0. What do you think?

[jouni]

Yeah, sounds good to me.