Я предполагаю, что в 'Foundation Grid' вы ссылаетесь на их 'XY Grid' ... если бы это было одно из возможных решений для вас, без необходимости добавлять какие-либо дополнительные CSS / SCSS или медиа-запросы, было бы использовать классы 'shrink' и 'auto' в ваших ячейках (см. код ниже). Использование класса «shrink» с вашей ячейкой / столбцом будет держать эту ячейку на ширине самого длинного содержимого (в вашем случае неупорядоченный / упорядоченный список), в то же время автоматически настраивая, чтобы заполнить оставшуюся ширину области просмотра оставшимися ячейками. / столбец (ы) в этой строке сетки-х. Если вы хотите, чтобы ячейки / столбцы складывались на <= средних размерах видового экрана, вы просто меняете 'medium- [shrink or auto]' на 'large- [shrink or auto]'. Для получения дополнительной информации см. Раздел «Авторазмер» в Zurb XY Grid <a href="https://foundation.zurb.com/sites/docs/xy-grid.html" rel="nofollow noreferrer"> здесь .
<div class="grid-x grid-margin-x">
<div class="cell medium-shrink">
<ul>
<li>No wrapping list item here that has longer content so it will be wider</li>
<li>No wrapping list item here that has long content</li>
<li>No wrapping list item here that has long content</li>
</ul>
</div>
<div class="cell medium-auto">
Expanded content would be here that fills in the rest of the viewport from >= medium viewport size and then stacks on small viewport size.
</div>
</div>