determining width of container based on how many flex items

Question

I'm creating a chart widget and would like to add a background overlay over it depending on how many items are completed.

Is there a way to determine eg. there are 7 units (items) and say there are completed then this shadow container covers 30% of the screen? but rather than using percentage, it goes by the number of flex items (3/7)?

.chart {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 50px;
}

.dot-black {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: black;
}

.dot-grey {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: grey;
}

.unit {
  flex: 1;
  display: flex;
  align-items: center;
}

.line-grey {
  height: 2px;
  background: grey;
  flex-grow: 1;
}

<div class="chart">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
</div>
<div style="position: absolute; width: 80%; height: 300px; background: grey; border: solid 1px #000; opacity: 0.5; top: 0; left: 0;" />

Answer 1

Consider CSS variable and you can easily define a number instead of a percentage

.chart {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 50px;
  position: relative;
}

.dot-black {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: black;
}

.dot-grey {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: grey;
}

.unit {
  flex: 1;
  display: flex;
  align-items: center;
}
.line-grey {
  height: 2px;
  background: grey;
  flex-grow: 1;
}

.overlay {
  position: absolute;
  width: calc(var(--n,0) * (100% - 30px)/8); /* 2*15px padding and 8 items*/
  height: 50px;
  background: grey;
  border: solid 1px #000;
  opacity: 0.5;
  top: 0;
  left: 15px; /* padding */
}

<div class="chart">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="overlay" style="--n:2"></div>
</div>
<div class="chart">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="overlay" style="--n:4"></div>
</div>
<div class="chart">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="overlay" style="--n:8"></div>
</div>