Add scroll to container not working properly

Issue

I'm not good using CSS and I don't understand why my CSS code is not working properly.

I need to add a horizontal scrolling to my CSS code when the element inside the div horizontal-list doesn't have enough space to be displayed. I have tried in many ways and read some tutorial but still not working

Here is my original code

.horizontal-list {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  padding-top: 90px;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  position: relative;
  margin: 0 25px;
}

.circle span {
  position: absolute;
  top: -30px;
}

.line {
  height: 10px;
  background-color: #333;
  flex: 1;
  position: absolute;
  width: calc(100% - 120px);
  z-index: -1;
}

<div class="scroll-container">
  <div class="horizontal-list">
    <div class="circle">
      <span>Elemento 1</span>
    </div>

    <div class="circle">
      <span>Elemento 2</span>
    </div>

    <div class="circle">
      <span>Elemento 3</span>
    </div>

    <div class="circle">
      <span>Elemento 4</span>
    </div>

    <div class="circle">
      <span>Elemento 5</span>
    </div>

    <div class="line"></div>
  </div>
</div>

Solution

You can set the min-width for the .circle elements which will help override the distortion applied by the flex-box on the parent.

:root{
  --width:120px;
  --lineheight:10px;
  --circles:16;
  --rmargin:25px;
}

.horizontal-list {
  display: flex;
  flex-direction:row;
  flex-wrap: nowrap;
  
  justify-content: flex-start;
  align-items: center;
  
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  
  position: relative;
  padding-top: 90px;
  margin:0;
  max-width:100%;
  width:100%;
}

.circle {
  width: var(--width)!important;
  height: var(--width)!important;
  min-width: var(--width)!important;
  min-height: var(--width)!important;
  
  border-radius: 50%!important;
  
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  position: relative;
  margin: 0 25px;
}

.circle span {
  position: absolute;
  top: -30px;
}

.line {
  display:block;
  height: var(--lineheight);
  background-color: #333;
  flex: 1;
  position: absolute;
  width:calc( var(--circles) * calc( var(--width) + calc( var(--rmargin) * 2 ) ) );
  z-index: -1;
}

<div class="scroll-container">

  <div class="horizontal-list">
    
    <div class="circle">
      <span>Elemento 1</span>
    </div>

    <div class="circle">
      <span>Elemento 2</span>
    </div>

    <div class="circle">
      <span>Elemento 3</span>
    </div>

    <div class="circle">
      <span>Elemento 4</span>
    </div>

    <div class="circle">
      <span>Elemento 5</span>
    </div>
    
    <div class="circle">
      <span>Elemento 6</span>
    </div>

    <div class="circle">
      <span>Elemento 7</span>
    </div>
    
    <div class="circle">
      <span>Elemento 8</span>
    </div>
    
    <div class="circle">
      <span>Elemento 9</span>
    </div>

    <div class="circle">
      <span>Elemento 10</span>
    </div>

    <div class="circle">
      <span>Elemento 11</span>
    </div>

    <div class="circle">
      <span>Elemento 12</span>
    </div>

    <div class="circle">
      <span>Elemento 13</span>
    </div>
    
    <div class="circle">
      <span>Elemento 14</span>
    </div>

    <div class="circle">
      <span>Elemento 15</span>
    </div>
    
    <div class="circle">
      <span>Elemento 16</span>
    </div>
    
    
    <div class="line"></div>
  </div>
</div>

Answered By - Professor Abronsius