html元素正在CSS display flex属性中拉伸

我目前正在一个网站上制作流程图部分。在这个图表中，我添加了

宽度：42px

和

高度：42px

的数字，其中

边框半径：100%但它在每个列表上都有延伸。我需要用圆圈的形式把它修好。我不知道为什么在使用CSS属性
display:flex
时会发生这种情况。有人能帮我解决这个问题吗


代码如下：


：根目录{
--主色一#858485；
--二次色：#2e；
--标题颜色：#2222222；
--段落颜色：#858485；
--悬停颜色：#1674b1；
--背景颜色：#fafafa；
--bg颜色二：#fff；
--bg颜色三：#29547E；
--标题字体：“卡拉”，无衬线；
--正文字体：“蒙特塞拉特”，无衬线；
--tasti字体：“Katibeh”，草书；
--d:700ms；
--e：立方贝塞尔（0.19,1,0.22,1）；
}
.流程图{
宽度：80%；
}
.ul流程图{
显示器：flex；
柔性流动：柱；
}
.李先生{
自我校准：灵活启动；
边框：1px实心#d9d9d9；
宽度：35%；
位置：相对位置；
显示器：flex；
对齐项目：居中；
}
.流程图li>div{
填充：20px；
背景颜色：var（--bg颜色二）；
z指数：999；
宽度：100%；
显示器：flex；
对齐项目：居中；
}
.流程图li>分区w-num{
背景颜色：var（--标题颜色）；
宽度：70px；
高度：40px；
边界半径：100%；
显示：块；
右边距：10px；
文本对齐：居中；
颜色：#fff；
垂直对齐：中间对齐；
线高：40px；
字体大小：粗体；
}
.流程图li：第一个孩子.流程图分隔符{
宽度：50%；
}
.流程图li：第n个孩子（偶数）{
自对准：柔性端；
}
.流程图李：第n个孩子（偶数）：之后{
右：100%；
}
.流程图分割器{
位置：绝对位置；
高度：1px；
宽度：100%；
背景色：var（--悬停色）；
左：100%；
}
.流程图分隔器.w-分隔器-r{
位置：相对位置；
显示：块；
}
.流程图分隔器。w-分隔器-r：后{
左：100%；
宽度：1px；
底部：-1px；
背景色：var（--悬停色）；
内容：''；
位置：绝对位置；
高度：65px；
显示：块；
}
.流程图li:n个子项（偶数）.流程图分隔符{
右：100%；
左：继承；
}
.流程图li:第n个子项（偶数）.流程图分隔符.w-分隔符-r:之后{
右：100%；
左：继承；
}



1Lorem Ipsum仅仅是


2Lorem Ipsum只是印刷和排版行业的虚拟文本


两件事：
1)
边界半径：100%；只有在将“带”和“高度”设置为相同的值时，才能正确工作（如获得一个完美的圆）。您当前已定义宽度：70px和高度40px。这需要是40/40或70/70

2） 第二，因为你使用flex，你的宽度被忽略，你的div正在缩小到8px。为了解决这个问题，您需要将不想收缩的div的flex-shrink设置为0

您已更正的CSS：

.flowchart li>div .w-num {
    background-color: var(--heading-color);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: block;
    margin-right: 10px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
    line-height: 40px;
    font-weight: bold;
    flex-shrink: 0;
}

两件事：
1)
边界半径：100%；只有在将“带”和“高度”设置为相同的值时，才能正确工作（如获得一个完美的圆）。您当前已定义宽度：70px和高度40px。这需要是40/40或70/70

2） 第二，因为你使用flex，你的宽度被忽略，你的div正在缩小到8px。为了解决这个问题，您需要将不想收缩的div的flex-shrink设置为0

您已更正的CSS：

.flowchart li>div .w-num {
    background-color: var(--heading-color);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: block;
    margin-right: 10px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
    line-height: 40px;
    font-weight: bold;
    flex-shrink: 0;
}

问题是您需要将
flex
项包装在容器中，这样它就不会对子项产生影响。。我只是把你的号码泡泡包装成
span


：根目录{
--主色一#858485；
--二次色：#2e；
--标题颜色：#2222222；
--段落颜色：#858485；
--悬停颜色：#1674b1；
--背景颜色：#fafafa；
--bg颜色二：#fff；
--bg颜色三：#29547E；
--标题字体：“卡拉”，无衬线；
--正文字体：“蒙特塞拉特”，无衬线；
--tasti字体：“Katibeh”，草书；
--d:700ms；
--e：立方贝塞尔（0.19,1,0.22,1）；
}
.流程图{
宽度：80%；
}
.ul流程图{
显示器：flex；
柔性流动：柱；
}
.李先生{
自我校准：灵活启动；
边框：1px实心#d9d9d9；
宽度：35%；
位置：相对位置；
显示器：flex；
对齐项目：居中；
}
.流程图li>div{
填充：20px；
背景颜色：var（--bg颜色二）；
z指数：999；
宽度：100%；
显示器：flex；
对齐项目：居中；
}
.流程图li>分区w-num{
背景颜色：var（--标题颜色）；
宽度：40px；
高度：40px；
边界半径：100%；
显示：块；
右边距：10px；
文本对齐：居中；
颜色：#fff；
垂直对齐：中间对齐；
线高：40px；
字体大小：粗体；
}
.流程图li：第一个孩子.流程图分隔符{
宽度：50%；
}
.流程图li：第n个孩子（偶数）{
自对准：柔性端；
}
.流程图李：第n个孩子（偶数）：之后{
右：100%；
}
.流程图分割器{
位置：绝对位置；
高度：1px；
宽度：100%；
背景色：var（--悬停色）；
左：100%；
}
.流程图分隔器.w-分隔器-r{
位置：相对位置；
显示：块；
}
.流程图分隔器。w-分隔器-r：后{
左：100%；
宽度：1px；
底部：-1px；
背景色：var（--悬停色）；
内容：''；
位置：绝对位置；
高度：65px；
显示：块；
}
.流程图li:n个子项（偶数）.流程图分隔符{
右：100%；
左：继承；
}
.流程图li:第n个子项（偶数）.流程图分隔符.w-分隔符-r:之后{
右：100%；
左：继承；
}



1Lorem Ipsum仅仅是


2Lorem Ipsum只是印刷和排版行业的虚拟文本


问题是您需要将
flex
项包装在容器中，这样它就不会对子项产生影响。。我只是把你的号码泡泡包装成
span


：根目录{
--主色一#858485；
--次级结肠