How to make responsive width of flex elements?

Question

When the screen width is reduced, the flex element does not change its width. I assume that this is due to the nesting of flexboxes, since if you do not nest flexboxes into each other, then the width of each flex element becomes responsive when the screen width decreases. Is it possible to make a responsive width with such nested code?

.first {
  display: flex;
  align-items: center;
}

.second {
  display: flex;
  align-items: center;
}

.three {
  height: 8px;
  width: 8px;
  margin: 2px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: red;
}

.four {
  width: 262px;
  height: 1px;
  border-radius: 2px;
  margin: 0 2px;
  background-color: blue;
  flex-shrink: 1;
}

.five {
  width: 222px;
  height: 4px;
  margin: 0 6px;
  background-color: green;
  flex-shrink: 1;
}

<div class="first">
  <div class="second">
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
  <div class="second">
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
  <div class="second">
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
  <div class="second">
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
</div>

Answer 1

you use fixed width with px. change to % or vw to make responsive

.first {
  display: flex;
  align-items: center;
  width:100%;
}

.second {
  display: flex;
  align-items: center;
  width:25%;
}

.three {
  height: 5px;
  width: 5%;
  margin: 2px;
  flex-shrink: 0;
  border-radius: 5%;
  background-color: red;
}

.four {
  width: 50%;
  height: 1px;
  border-radius: 2px;
  margin: 0 2px;
  background-color: blue;
  flex-shrink: 1;
}

.five {
  width: 40%;
  height: 4px;
  margin: 0 6px;
  background-color: green;
  flex-shrink: 1;
}

<div class="first">
  <div class="second">
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
  <div class="second">
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
  <div class="second">
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
  <div class="second">
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
  </div>
</div>