Flexbox line-break row only first column with overflow scroll

Question

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

Code is here: http://dkrasniy.com/open-enroll/scrollable.html View on mobile viewport — dkrasniy, Apr 20 '18 at 15:19
I think that it will be more easy to us if you provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) instead of the webpage. — goediaz, Apr 20 '18 at 15:27
@dkrasniy Once you'll fix your issue or your site would go down, you question will become useless. — Vadim Ovchinnikov, Apr 20 '18 at 15:28
That is a good point: Here is a JSFiddle https://jsfiddle.net/davekrasniy/4xucx4fz/2/ — dkrasniy, Apr 20 '18 at 15:44
@dkrasniy Goediaz comment about MCVE is relevant. Especially "Minimal" word. Your jsFiddle has 1200+ lines of code. Could you please narrow down your code demo to something much more compact that reproduces your issue? — Vadim Ovchinnikov, Apr 20 '18 at 16:49

Cathy · Accepted Answer · 2018-04-20T18:15:12.917

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):

remove the left:0 from .single-row-label
add max-width: 100vw; overflow-x: scroll; to .flex-row

Thanks for the quick response! However, I am looking for the row header to be fullwidth and line break after. The cells after it would be on a new line and scrollable. The solution you provided simply adds a scrollbar to the row :( — dkrasniy, Apr 20 '18 at 15:17
@user3014487 is there any reason you can't put the flex-wrap on .flex-row? — Cathy, Apr 20 '18 at 15:20
Adding flex-wrap would wrap all the columns once they overflow (4+ columns). They need to be all in one row corresponding to the appropriate column header. — dkrasniy, Apr 20 '18 at 15:22

Flexbox line-break row only first column with overflow scroll

1 Answers1