html 元素在 CSS 显示 flex 属性中拉伸

Question

I am currently working on a website to make a flowchart section. In this chart, I added width:42px and height:42px in numbers with border-radius:100%; but it's stretching on each list. I need to fix it in the circled form. I don't know why this happened when I usign the CSS property display:flex . Kindly can someone help me to solve the issue?

Here is the code:

 :root { --main-color-one: #858485; --secondary-color: #2e2e2e; --heading-color: #222222; --paragraph-color: #858485; --hover-color: #1674b1; --bg-color: #fafafa; --bg-color-two: #fff; --bg-color-three: #29547E; --heading-font: "Karla", sans-serif; --body-font: "Montserrat", sans-serif; --tasti-font: "Katibeh", cursive; --d: 700ms; --e: cubic-bezier(0.19, 1, 0.22, 1); } .flowchart { width: 80%; } .flowchart ul { display: flex; flex-flow: column; } .flowchart li { align-self: flex-start; border: 1px solid #d9d9d9; width: 35%; position: relative; display: flex; align-items: center; } .flowchart li>div { padding: 20px; background-color: var(--bg-color-two); z-index: 999; width: 100%; display: flex; align-items: center; } .flowchart li>div .w-num { background-color: var(--heading-color); width: 70px; height: 40px; border-radius: 100%; display: block; margin-right: 10px; text-align: center; color: #fff; vertical-align: middle; line-height: 40px; font-weight: bold; } .flowchart li:first-child .flowchart-divider { width: 50%; } .flowchart li:nth-child(even) { align-self: flex-end; } .flowchart li:nth-child(even):after { right: 100%; } .flowchart-divider { position: absolute; height: 1px; width: 100%; background-color: var(--hover-color); left: 100%; } .flowchart-divider .w-divider-r { position: relative; display: block; } .flowchart-divider .w-divider-r:after { left: 100%; width: 1px; bottom: -1px; background-color: var(--hover-color); content: ''; position: absolute; height: 65px; display: block; } .flowchart li:nth-child(even) .flowchart-divider { right: 100%; left: inherit; } .flowchart li:nth-child(even) .flowchart-divider .w-divider-r:after { right: 100%; left: inherit; }

 <div class="container"> <div class="row justify-content-center"> <div class="flowchart"> <ul class="list-unstyled"> <li> <div><span class="w-num">1</span>Lorem Ipsum is simply dummy text of the</div><span class="workflow-divider"><span class="w-divider-r"></span></span> </li> <li> <div><span class="w-num">2</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div><span class="workflow-divider"><span class="w-divider-r"></span></span> </li> </ul> </div> </div> </div>

Answer 1

Two things: 1) border-radius: 100%; only works correctly (as in getting you a perfect circle)when you set your with and height to the same value. You currently have width: 70px and height 40px defined. This needs to be either 40/40 oder 70/70.

2) secondly because you use flex your width is ignored and your div's are shrinking to 8px. To combat that you need to set flex-shrink to 0 for the div you don't want to shrink.

Your corrected 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;
}

Answer 2

Issue is you need to wrap flex item in container so that it wont effect on child.. i Just wrap your number bubble to span

 :root { --main-color-one: #858485; --secondary-color: #2e2e2e; --heading-color: #222222; --paragraph-color: #858485; --hover-color: #1674b1; --bg-color: #fafafa; --bg-color-two: #fff; --bg-color-three: #29547E; --heading-font: "Karla", sans-serif; --body-font: "Montserrat", sans-serif; --tasti-font: "Katibeh", cursive; --d: 700ms; --e: cubic-bezier(0.19, 1, 0.22, 1); } .flowchart { width: 80%; } .flowchart ul { display: flex; flex-flow: column; } .flowchart li { align-self: flex-start; border: 1px solid #d9d9d9; width: 35%; position: relative; display: flex; align-items: center; } .flowchart li>div { padding: 20px; background-color: var(--bg-color-two); z-index: 999; width: 100%; display: flex; align-items: center; } .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; } .flowchart li:first-child .flowchart-divider { width: 50%; } .flowchart li:nth-child(even) { align-self: flex-end; } .flowchart li:nth-child(even):after { right: 100%; } .flowchart-divider { position: absolute; height: 1px; width: 100%; background-color: var(--hover-color); left: 100%; } .flowchart-divider .w-divider-r { position: relative; display: block; } .flowchart-divider .w-divider-r:after { left: 100%; width: 1px; bottom: -1px; background-color: var(--hover-color); content: ''; position: absolute; height: 65px; display: block; } .flowchart li:nth-child(even) .flowchart-divider { right: 100%; left: inherit; } .flowchart li:nth-child(even) .flowchart-divider .w-divider-r:after { right: 100%; left: inherit; }

 <div class="container"> <div class="row justify-content-center"> <div class="flowchart"> <ul class="list-unstyled"> <li> <div><span><span class="w-num">1</span></span><span>Lorem Ipsum is simply dummy text of the</span></div><span class="workflow-divider"><span class="w-divider-r"></span></span> </li> <li> <div><span><span class="w-num">2</span></span><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span></div><span class="workflow-divider"><span class="w-divider-r"></span></span> </li> </ul> </div> </div> </div>