Я показываю стихи: стихи и тексты песен. У меня есть один макет, в котором тексты песен текут как многостолбцовый текст. У меня это работает с Flex Layout, но это не на 100% к моему удовлетворению. См. Этот код: https://codepen.io/sidewayss/pen/WNNEBgV
Остается проблема с горизонтальным интервалом столбцов. Flex-макет распределяет столбцы так, как будто я установил альтернативную версию align-items:space-between. Я хочу, чтобы столбцы выравнивались по левому краю, что может быть достигнуто только путем установки ширины контейнера <div> на один пиксель больше ширины, при которой он начинает горизонтальную прокрутку, минимальной ширины для отображения всего текста.
Мне кажется, что должен быть способ сделать это с помощью компоновки сетки, но я не смог этого сделать. Я пробовал различные настройки, в том числе различные настройки автопотока.
Есть ли решение для этого в CSS, или я должен полагаться на JavaScript? У меня есть способ сделать это в JS, и у меня уже есть код, который управляет этими элементами, но я бы предпочел сделать это в CSS. По крайней мере, мне кажется, что это очень разумный запрос макета. Самыми большими проблемами, с которыми я столкнулся при разметке сетки, является необходимость задания количества строк и столбцов и размера этих столбцов. Я хочу, чтобы все было автоматически, иначе я все еще пишу код JS для установки этих значений.