Css overflow-x: автоматически не добавляет полосы прокрутки при гибком отображении ⇐ CSS

[Anonymous]

У меня есть гибкий элемент div со строкой направления. Внутри этого div есть «сетка» слева и две кнопки справа. Каждый в своем диве. Я хочу, чтобы в области сетки была полоса прокрутки, если ее содержимое превышает горизонтальное пространство.
У меня есть простая настройка:

Код: Выделить всё

.rows-content{
display: flex;
flex-direction: row;
}
.rows { overflow-x: auto; }

HTML

Код: Выделить всё

вы можете увидеть образец всей страницы на этом jsfiddle. если вы посмотрите на вариант 2, то увидите, как сетка выходит за пределы оси X без прокрутки.
Я пробовал добавить в стили следующее, но это не помогло

Код: Выделить всё

    .rows {
overflow-x: auto;
display: flex;
flex-direction: column; }
.row-actions {
display: flex;
flex-direction: column; }

Я уже много раз заставлял это работать, но что-то на моей странице нарушает эту функциональность.
Может ли кто-нибудь помочь мне разобраться с jsfiddle, почему область сетки не прокручивается, а продолжает расширяться.

Подробнее здесь: https://stackoverflow.com/questions/786 ... ex-display