CSS columns of different width summing up to the whole page
Хочу через CSS (хотя, если честно, то хотя бы как-нибудь!) сделать такую фишку: слой, занимающий полную ширину страницы, разбит на несколько колонок так, что колонки в сумме занимают всю ширину слоя. К колонкам применён overflow-x: scroll. Представим, что все колонки одинаковые по ширине. Теперь, если содержимое колонки уже самой колонки, уменьшаем её до минимальной ширины, при которой всё содержимое в неё влезает, и распределяем освободившееся пространство поровну между всеми ещё не уменьшенными колонками. Так, разумеется, делаем для каждой колонки. (Колонки обрабатываем в порядке возрастания ширины их содержимого.) Меня интересует результат, а не процесс, но иметь даже скрипт, выполняющий этот алгоритм, уже будет хорошо.
I want to do the following via CSS (although, to be honest, at least in some way): a layer taking up the full width of the page is split into columns, so that the columns take up the full width of the layer. The rule overflow-x: scroll is applied to the columns. Imagine that all columns have the same width. Now, if a column’s content is narrower than the column itself is, shrink it to the minimal width at which all content fits inside and divide the freed space evenly between all columns that have not yet been shrunken. Of course, repeat this for every column. (Process columns in increasing order of content width.) I am interested in the result rather than the process, but even a script that simply implements this algorithm would be nice.
Update: implemented in JavaScript for my specific case. Still interested in a general-case solution.