3

I'm looking to "freeze" (i.e. hold in place regardless of vertical scrolling) two columns and a header in my page's layout. I've done this sort of thing in the past on a div using:

position: fixed;

But this destroys my layout consistency when using CSS3 Flexboxes.

Does anyone know how/if this can be accomplished without using JavaScript?

For reference, here's my layout:

Current Layout

There are two flex containers below the header. The outer flex container controls "Col 1" and "Col 2", and the inner container controls "Col A", "Col B", and "Col C" and it's placed on "Col 2" itself (so "Col 2" is a flex container and flex item). "Col 2" has no content itself and its sole purpose is to act as a container.

I'd like to freeze "Col 1", "Col C", and ideally the header as well:

New Layout

The outer flex container flex CSS is:

display: flex;
flex-direction: row;
flex-wrap: nowrap;

"Col 1" is:

flex: 1 6 25%;

"Col 2":

display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 3 1 75%;
order: 2;

"Col A":

flex: 2.5;

"Col B":

flex: 2.5;

"Col C":

flex: 1;

Header:

display: flex;
flex-direction: row;
flex-wrap: wrap;

Edit: Here's a Plunker demonstrating the layout I have: https://plnkr.co/edit/5yJjIYiupJoNItikFg5P?p=preview

badger2013
  • 1,123
  • 2
  • 8
  • 10
  • Freeze how? ... Do they have predefined width/height? – Asons Sep 27 '16 at 20:00
  • By position. The outer flex container has a height set to 100%. Col 1 has min-width of 250px, a max-width of 350px, and a min-height of 100%. Col 2, Col A, Col B, and Col C do not have a height or width defined. All of these can be changed however. – badger2013 Sep 27 '16 at 20:33
  • What should scroll? ... Please post a minimal working code snippet reproducing the layout so we have with what to work – Asons Sep 27 '16 at 20:39
  • by "freeze" do you mean something like [this (the left column stays 'fixed' while right column overflows)](http://stackoverflow.com/questions/39586406/set-the-same-width-of-a-position-fixed-div-as-parent-divflexbox-item/39586965#39586965) or [something like this](http://stackoverflow.com/questions/39482088/css-page-to-cut-off-at-window-with-html-body-display-hidden/39482627#39482627)? – kukkuz Sep 28 '16 at 01:23
  • I've added a link to a Plunker I created which shows the layout I have now. By "freeze" I mean lock in place, similar to Excel's freezing feature for rows and columns. When the user scrolls vertically the areas that are frozen should not shift. Col A and Col B should scroll. – badger2013 Sep 28 '16 at 15:01

0 Answers0