Предотвратить расширение области сетки, заставляя прокручивать всю страницу

у меня есть эта сетка:

+---------+------------------------------+---------+    
|  <div>  |  <p> - 1000 characters long  |  <div>  |
+---------+------------------------------+---------+

внутриp есть супер длинная строка без пробелов.divs заполнители с фиксированными размерами. Это производит выше:

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;

Но меняетсяminmax(0, 1fr) в1fr дает это:

+---------+----------------------------------------+    
|  <div>  |               <p> - 1000 characters long  |  <div>  |
+---------+----------------------------------------+

Он выходит за пределы родительского элемента и выходит за пределы размера экрана. Почему он не ведет себя как minmax?

Codepen

Ответы на вопрос(1)

Ваш ответ на вопрос