Достичь ширины элементов братьев и сестер, чтобы соответствовать 100% от родителей или ширины самой широкой из них, с не ⇐ Html

[Anonymous]

В нашем веб -приложении страница может содержать несколько разделов, расположенных вертикально. Раздел - это Div, который может быть установлен на динамическую ширину (заполните 100% от родителей) или иметь фиксированную ширину. Если раздел установлен на фиксированную ширину, превышающую ширину родителя, то все остальные разделы должны соответствовать этой ширине. Другими словами, все разделы ширины должны быть равны max (100%, width_of_widest_fixed_section) .
Некоторые разделы содержат дополнительные элементы, и, если необходимо, эти разделы могут быть горизонтально прокрутить. Внутренние элементы никогда не должны влиять на ширину раздела. < /P>
Приведенное выше описание упрощено, но должно быть достаточно, чтобы понять контекст. Теперь образец (также упрощен): < /p>

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

* {
box-sizing: border-box;
}

#main {
border: 1px solid red;
padding: 5px;
width: 100%;
}

.section {
border: 1px solid lightseagreen;
padding: 3px;
overflow-x: auto;
}

.spacer {
height: 5px;
}

.item {
height: 20px;
background: linear-gradient(90deg, red 5%,orange 5% 95%, yellow 95%);
}

.fill {
width: 100%;
}

.fill .item {
width: 3000px;
}

.static {
width: 200px;
}

.static .item {
width: 100%;
}< /code>







< /code>
< /div>
< /div>
< /p>
Первый раздел прокручивается и заполняет 100% от родительской ширины. Второй раздел имеет фиксированную ширину 200px, поэтому он ничего не влияет. Проблема начинается, если его ширина изменена до большего значения, например, 3000px. Это переполняет родитель, но, конечно, ширина первого раздела и ширина #Main не затронута.
Я попытался установить #mine-width 

на fit-content , но в этом случае ширина первого раздела начинает влиять на ширину родителей, а это означает, что прокрутка больше нет. Я также проверил некоторые дополнительные настройки, некоторые сумасшедшие, некоторые странные - ничего не сработало. Также попробовал два ИИ, но их решение было исправлено один случай, уничтожая другой, исправил второй и уничтожил первый, промыл и повторяйте ... < /p>
Это настройка возможна? Предпочтительно с неповрежденной структурой HTML и без JS.

Подробнее здесь: https://stackoverflow.com/questions/796 ... dest-of-th