I have been attempting to make another div occupy the remaining space in the numerical list item using list-style-position: inside, but it does not seem to be working for me.
While I could opt for list-style-position: outside and add some spacing to avoid overlapping with other elements on the page, I would much prefer to position it inside if that is achievable. My intention is for the list to exceed 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>