Flex容器内按钮聚焦时轮廓被截断的问题求助

问题出在outline是绘制在元素盒模型外部的，而你的父容器.form-buttons没有预留足够的外部空间，再加上align-items: flex-start的对齐方式，导致焦点状态的按钮轮廓被截断。下面给你几个实用的解决办法：

方案一：给父容器添加内边距，容纳轮廓空间 #

直接给.form-buttons加上对应大小的内边距，让它的内部空间足以放下按钮和外部的轮廓：

.form-buttons {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    padding: 3px; // 对应outline的2px宽度+1px偏移，刚好容纳轮廓
}

这样按钮的轮廓就不会超出父容器的范围，自然不会被截断。

方案二：用box-shadow替代outline（更推荐） #

box-shadow不会改变元素的盒模型尺寸，同时能实现和outline几乎一样的焦点提示效果，还不会出现截断问题：

.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: none; // 去掉原有outline
        box-shadow: 0 0 0 3px $color-primary-link-default; // 模拟2px outline + 1px offset的效果
    }
}

这个方案不需要调整父容器，适配各种场景，不管按钮高度怎么变都能正常显示焦点样式。

方案三：调整父容器的对齐方式与最小高度（仅适配固定场景） #

如果你坚持用outline，可以给父容器设置足够的最小高度，把按钮的min-height加上轮廓的总高度（上下各3px，总共6px）：

.form-buttons {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    min-height: 56px; // 50px + 2*3px（outline宽度+偏移）
}

但这个方案只适用于按钮高度固定的场景，如果你后续按钮高度变化，还得重新计算，灵活性较差。

内容的提问来源于stack exchange，提问作者vhochstein