Flexbox: только строка первого разрыва строки с прокруткой переполнения

Question

В настоящее время я использую строки flex и flex-direction для ряда элементов с фиксированной шириной, что приводит к переполнению и горизонтальной полосе прокрутки, что я и ищу.

Однако мне нужно, чтобы первый столбец в этих строках был на всю ширину, в то время как остальные элементы перемещаются с горизонтальной прокруткой. Вот почему я не могу использовать обертку.

Вот эта страница: http://dkrasniy.com/open-enroll/scrollable.html

Примечание. Полноразмерный заголовок должен находиться только в мобильном окне просмотра.

Под "Вычитаемым календарным годом" стоят заголовки строк "Индивидуальный" и "Семейный". Это те, которые должны идти на полную ширину, когда на мобильном устройстве.

Спасибо

Answer 1

Изменить после уточнения:

Я полагаю, что вы просите, чтобы все братья и сестры в гибком контейнере, кроме первого, должны быть на одной строке. Проблема в том, что flex-wrap всегда находится на родительском / содержащем элементе, поэтому, если вы не оберните элементы, не являющиеся заголовками строк, в другой контейнер, я не вижу способа добиться этого с помощью flexbox.

Вы можете добавить обертку, как это, а затем добавить CSS ниже:

.flex-row {
  flex-wrap: wrap;
}
.innerrow {
  display: flex;
  flex: 100%;
  overflow-x: scroll;
  max-width: 100vw;
}

<div role="row" class="d-flex flex-row compare-container">

                <div role="rowheader" class="col-3 single-row-label">Individual</div>
                <div class="innerrow">
                  <div role="cell" class="col-3 plan-col _1 data-point">$0</div>
                  <div role="cell" class="col-3 plan-col _2 data-point">$0</div>
                  <div role="cell" class="col-3 plan-col _3 data-point">$10</div>
                  <div role="cell" class="col-3 plan-col _4 data-point">$25</div>
                  <div role="cell" class="col-3 plan-col _5 data-point">$25</div>
                </div>
            </div>

Оригинал:

без jsbin это то, что я предлагаю вам (в рамках любых медиа-запросов, которые вам нужны):

• убрать слева:0 из.single-row-label
• добавьте max-width: 100vw; переполнение-х: прокрутка; в.flex-row