html элемент растягивается в CSS свойство flex отображения

Question

В настоящее время я работаю над сайтом, чтобы создать блок-схему. На этом графике я добавил width:42px и height:42px в числах с border-radius:100%;, но он растягивается в каждом списке. Мне нужно исправить это в обведенной форме. Я не знаю, почему это произошло, когда я присвоил CSS свойство display:flex. Пожалуйста, может кто-нибудь помочь мне решить проблему?

Вот код:

: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

Проблема в том, что вам нужно обернуть flex элемент в контейнере, чтобы он не влиял на ребенка.

: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>

Answer 2

Две вещи: 1) радиус границы: 100%; работает правильно (как при создании идеального круга), когда вы устанавливаете с помощью и высоту на то же значение. В настоящее время у вас есть ширина: 70px и высота 40px. Это должно быть 40/40 или 70/70.

2) во-вторых, потому что вы используете flex, ваша ширина игнорируется, а ваши div уменьшаются до 8px. Чтобы бороться с этим, вам нужно установить flex-shrink на 0 для div, который вы не хотите уменьшать.

Ваш исправленный 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;
}