CSS гибкая строка с одним элементом с использованием горизонтальной прокрутки ⇐ CSS

[Anonymous]

Я хочу создать гибкую строку с двумя дочерними элементами. Слева и справа:

• правая сторона будет содержать пару кнопок, расположенных друг над другом, и ее ширина не изменится
• левая сторона будет иметь динамическое количество «полей», которые пользователь может добавлять и удалять. (назначение «кнопок» — добавлять/удалять поля)
• Я хочу, чтобы элемент left прокручивался горизонтально, если он содержимое занимает больше места, чем оставшееся место в строке, а также меняет размер, если размер браузера/окна изменяется пользователем.
• сами левые поля не могут изменить размер, они должны оставаться определенной ширины (т.е.: flex-shrink: 0)

Я подготовил простой тест для этот сценарий, но я не могу заставить его работать:

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

ROW 1


box 1
box 2
box 3


button 1
button 2


ROW 2 - overflows remaining space


box 1
box 2
box 3
box 4
box 5
box 6
box 7
box 8
box 9


button 1
button 2

со следующим CSS

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

.featureWrap {
display: flex;
flex-direction: column;
margin: 30px;
}

.featureRow {
display: flex;
flex-direction: row;
padding: 5px;
border: solid 1px rgb(236, 158, 40);
margin: 10px 0;
}

.rowLeft {
display: flex;
flex-direction: row;
flex-shrink: 0;
padding: 5px;
border: solid 1px rgb(83, 176, 230);
overflow-x: auto;
}

.rowRight {
display: flex;
flex-direction: column;
padding: 5px;
border: solid 1px rgb(51, 212, 64);
}

.boxLeft {
width: 100px;
height: 20px;
background-color: rgb(152, 215, 226);
border: solid 1px #555;
}

.boxRight {
width: 100px;
height: 20px;
background-color: greenyellow;
border: solid 1px #555;
}

вот стек рабочего примера.
может ли кто-нибудь помочь мне понять, как заставить левую сторону прокручиваться горизонтально, даже с изменение размера страницы

Подробнее здесь: https://stackoverflow.com/questions/787 ... tal-scroll