javascriptcssflexboxcss-gridflexboxgrid

Flexbox line-break row only first column with overflow scroll

I am currently using flex and flex-direction row for a row of items with fixed widths which results in overflow and a scrollbar horizontally, which is what I am looking for.

However, I need the first column in these rows to be full-width, while the rest of the items flow under with the horizontal scroll. That's why I can't use wrap.

Here is the page: http://dkrasniy.com/open-enroll/scrollable.html

Note: The full-width heading should only be on the mobile viewport.

Under "Calendar Year Deductible" there are the row titles "Individual" & "Family". Those are the ones that need to go full width when on a mobile device.

Thanks

Solution

  • Edit after clarification:

    I believe what you are asking for is for all the siblings within a flex container except for the first to be on a single line. The issue with this is that the flex-wrap is always on a parent/containing element so unless you wrap the non-rowheader elements in another container I do not see a way to achieve this with flexbox.

    You could add a wrapper like this and then add the css below:

    .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>

    Original:

    without a jsbin this is what I have as a suggestion for you to do (within whatever media queries you need):