Make div fill remaining width with list-style-position: inside

Question

I'm trying to get another div fill the remaining space in the numerical li with list-style-position: inside but I can't seem to get it working.

Although I could use list-style-position: outside and add spacing because it overlaps other elements on the page, I would much prefer positioning it inside if that is possible. I plan on the list going past 100 items.

body { margin: 0; padding: 0; }

ul {
  list-style-position: inside;
  list-style-type: decimal;
  margin: 0;
  padding: 0;
}

li {
  width: 100%;
}

.myClass {
  display: inline-block;
  width: 100%; /* fill remaining space in the li */
  height: 20px;
  background: #000;
}

<ul>
  <li><div class="myClass"></div></li>
</ul>

Answer 1

You can use flex on the li, use css counter on a pseudo element for the number, then set .myClass to flex-grow: 1

body { margin: 0; padding: 0; }

ul {
  list-style-position: inside;
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: section;       
}

li {
  width: 100%;
  display: flex;
}

li:before {
  counter-increment: section;
  content: counter(section) ". ";
}

.myClass {
  display: inline-block;
  height: 20px;
  background: rgba(0,0,0,0.5);
  flex-grow: 1;
}

<ul>
  <li><div class="myClass"></div></li>
</ul>