Мобильная версияУ меня есть элемент сетки CSS, и одна из его ячеек содержит предварительно отформатированный код (...). В этом коде могут быть длинные строки, а экраны меньшей ширины могут не поместиться на всю строку. Однако я не хочу разрывать строку, потому что это может испортить определенный код, например:
console.log('test'); // Зарегистрируйте меня сообщение и делают это автоматически, однако они не применяют полосу прокрутки. Вместо этого содержимое переполняет родительский элемент. Чтобы решить эту проблему, я попытался добавить pre { overflow-x: auto; , который может отображать полосу прокрутки. Однако это по-прежнему растягивает любую родительскую ячейку сетки, чтобы она соответствовала базовому длинному блоку , даже если он содержится в теге фиксированной ширины, что не имеет смысла я.
См. следующий Stackblitz, где я это воспроизвел. Я попробовал минимальный пример сетки с двумя столбцами одинакового размера. Один из этих столбцов содержит длинный тег . Это подходит для экранов, достаточно больших, чтобы вместить содержимое, но для экранов меньших размеров тег растягивает свою ячейку за пределы половины экрана, а сетка также выходит за пределы контейнера и вызывает горизонтальная полоса прокрутки по сетке. Даже если я принудительно использую overflow-x: auto; для , тег все равно растягивает сетку до тех пор, пока он потребности. Другой столбец сжимается для компенсации, и почти всю ширину занимает этот тег . Это очень нежелательно, но я не могу найти способ это исправить. В этом примере я хочу, чтобы сетка всегда разделялась 50/50 между двумя столбцами. Если экран слишком мал для размещения длинного текста , то в или должна появиться горизонтальная полоса прокрутки. > и сетка должны всегда соответствовать ширине области просмотра и никогда не иметь полосы прокрутки.
Надеюсь, это изображение демонстрирует, что происходит, когда ширина области просмотра слишком мала. Макет из двух столбцов больше не разделен посередине, а в нижней части сетки появляется полоса прокрутки (две красные метки). Вместо этого я пытаюсь сохранить разделение посередине сетки и разместить полосу прокрутки только под содержимым кода в правом столбце.
Элемент проверки показывает, что тег имеет правильный размер. Если я применю к нему width: 50%;, я увижу, что он меньше, чем содержащая его ячейка сетки. Однако тег всегда занимает всю длину строки. Я думаю, что это ожидаемо, однако я думаю, что overflow-x: auto; в теге должен избегать увеличения длины ячейки сетки. Я что-то упускаю? Я пробовал возиться с width, max-width, overflow-x и white-space в as насколько я могу понять, разными способами.
Мне также удалось воспроизвести это с помощью flexbox, поэтому я не думаю, что это специфично для сетки. Это какая-то странность с , или white-space: pre;?
