SVG超出父div边界问题：排查与修复方案求助

SVG元素超出父div边界无法完整显示，尝试移除.LABEL_MAIN的padding后问题仍未解决，不确定是否是display: inline-flex导致异常，需要修复方法。

现有代码 #

HTML代码 #

<div class="LABEL_MAIN">
    <div class="LABEL_BOX">
        <div class="OP_LABEL">
            bro
        </div>                   
    </div>
    <div class="outer-plus">
        <div class="inner-plus">
            <svg xmlns="http://www.w3.org/2000/svg" width="10" 
                height="10" viewBox="0 0 10 10" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd" 
                  d="M5 0.5C5.25642 0.5 5.46775 0.69302 5.49664 
                  0.941689L5.5 1V4.5H9C9.27614 4.5 9.5 4.72386 
                  9.5 5C9.5 5.25642 9.30698 5.46775 9.05831 
                  5.49664L9 5.5H5.5V9C5.5 9.27614 5.27614 9.5 5 
                  9.5C4.74358 9.5 4.53225 9.30698 4.50336 
                  9.05831L4.5 9V5.5H1C0.723858 5.5 0.5 5.27614 
                  0.5 5C0.5 4.74358 0.69302 4.53225 0.941689 
                  4.50336L1 4.5H4.5V1C4.5 0.723858 4.72386 0.5 5 
                  0.5Z" fill="black"/>
            </svg>
        </div>
    </div>
</div>

CSS代码 #

.LABEL_MAIN{
    display: flex;
    width: 247px;
    align-items: center;
    gap: 23px;
    border-bottom: 1px gray solid;
    padding-bottom: 8px;
}

.LABEL_MAIN:last-child{
    border-bottom: none;
}

.LABEL_BOX{
    width: 247px; 
    justify-content: flex-start; 
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center; 
    gap: 23px; 
    display: inline-flex
}

.OP_LABEL{
    width: 224px; 
    color: green; 
    font-size: 14px; 
    font-family: Bogle;
    font-weight: 400; 
    text-decoration: underline; 
    line-height: 20px; 
    word-wrap: break-word
}

.outer-plus{
    padding: 8px;
    border-radius: 100px;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    display: inline-flex;
}

.inner-plus{
    padding: 3.50px;
    justify-content: flex-start; 
    align-items: flex-start; 
    display: inline-flex;
}

.plus{
    width: 9px; 
    height: 9px;
}

期望效果 #

加号SVG完整显示在圆形容器内，无截断，与左侧文本垂直居中对齐，容器样式完整。

修复方案 #

问题根源 #

1. .LABEL_BOX设置了固定width:247px，和父容器.LABEL_MAIN宽度一致，再加上.LABEL_MAIN的gap:23px，导致内部元素总宽度超出容器，挤压.outer-plus的空间，造成SVG被截断。
2. .outer-plus的align-items:flex-end让内部元素靠右，进一步加剧了裁切问题。

具体修复代码 #

1. 修改.LABEL_BOX，移除固定宽度，改为flex:1占据剩余空间：

.LABEL_BOX{
    /* width: 247px; 移除该行 */
    flex: 1;
    justify-content: flex-start; 
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center; 
    gap: 23px; 
    display: inline-flex
}

2. 调整.outer-plus的对齐方式，让内部元素居中：

.outer-plus{
    padding: 8px;
    border-radius: 100px;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    background: #f5f5f5; /* 可选，添加背景匹配示例效果 */
}

3. 优化.inner-plus的布局，移除不必要的padding并居中对齐：

.inner-plus{
    /* padding: 3.50px; 移除该行 */
    justify-content: center; 
    align-items: center; 
    display: inline-flex;
}

调整后，SVG会完整显示在圆形容器内，且与左侧文本保持正确的垂直居中对齐。

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