In the example below you can see the issue. I have tried changing the grid-tample-colums property of the grid-container (ol) to grid-template-columns: min-content 1fr 0;. But I am stuck.
ol { counter-reset: Nr; list-style: none; display: grid; grid-template-columns: min-content 1fr; border: 2px solid rgba(255, 0, 0, .2); padding: 1rem; li { counter-increment: Nr; background-color: rgba(0, 0, 0, .1); grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-bottom: 2pt;&::before { margin-right: 0.1rem; content: counters(Nr, ".") "\00a0"; text-align: end; } }}<h2>This works</h2><ol><li>This is the first list item.</li><li>This is the second list item.</li><li>This is the third list item.</li></ol><h2>This is broken</h2><ol><li>This is the first list item.</li><li>This is the second list item.<ol><li>This is a nested list item.</li><li>This is a nother nested list item.</li></ol></li><li>This is the third list item.</li></ol>ol { counter-reset: Nr; list-style: none; display: grid; grid-template-columns: min-content 1fr 0; border: 2px solid rgba(255, 0, 0, .2); padding: 1rem; li { counter-increment: Nr; background-color: rgba(0, 0, 0, .1); grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-bottom: 2pt;&::before { margin-right: 0.1rem; content: counters(Nr, ".") "\00a0"; text-align: end; } }}<h2>My Attempt</h2><ol><li>This is the first list item.</li><li>This is the second list item.<ol><li>This is a nested list item.</li><li>This is a nother nested list item.</li></ol></li><li>This is the third list item.</li></ol>