Flex Container cutting of item, which increases height on focus using outline

I am using following scss:to have a row of buttons.Working good. However in case of focus the single buttons size increases by a few pixels and it looks like parent flex container .form-buttons does not adapt the height and outline is cut of at the bottom due to that.

    .form-buttons {        display: flex;        gap: 5px;        align-items: flex-start;    }    .form-button {        display: flex;        gap: 5px;        flex-wrap: nowrap;        align-items:center;        border-radius: 4px;        min-height: 50px;        padding: 0px 24px;        font-size: 16px;        line-height: 24px;        font-family: $font-family;&:focus ,&:focus-within{            **outline: 2px solid $color-primary-link-default;             outline-offset: 1px;        }    } 

I ve tried setting a min-height for form-buttons, and that fixes for specific cases the issue, however I do not know in advance for all cases necessary min-height