Пробел: nowrap изменяет размер родительского элемента, но не учитывает полосу прокрутки ⇐ CSS

[Anonymous]

У меня есть боковая панель с текстом, который нельзя переносить. Если текст слишком велик для контейнера, я хочу, чтобы контейнер (то есть боковая панель) расширялся. Вот MVP проблемы:



This is some text that must not wrap.





* {
box-sizing: border-box;
margin: 0;
}

body {
height: 100vh;
display: grid;
grid-template-columns: auto 1fr;
}

.etc {
/* Just for demo purposes to ensure a scrollbar appears. */
height: 200vh;
}

.sidebar {
overflow-y: auto;
}

.sidebar span {
white-space: nowrap;
overflow: auto;
}

Это приводит к следующему:
[img]https://i .sstatic.net/Z1CTAumS.png[/img]

Добавление дополнительного текста увеличивает ширину контейнера, но он всегда меньше ширины полосы прокрутки.< /p>
Почему это случилось, и как я могу это исправить? Желательно не добавлять отступы/поля справа на ширину полосы прокрутки.
Для прозрачности реальная кодовая база имеет более сложную разметку (см. ниже). В этом случае любой из элементов p:last-child, который окажется самым длинным, будет располагаться под полосой прокрутки (или оба, если они одинаковой длины).

• 
  
  Title
  This is underneath the scrollbar.
  
  Some text...
  This is also underneath the scrollbar if it's long enough.
  
  
  
  ...

Подробнее здесь: https://stackoverflow.com/questions/793 ... -scrollbar