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