Fixed position element inheriting the width of the flex element

Question

I am creating a user interface that requires a fixed position / sticky element at the bottom of the viewport with a width limited by the main content area. The main content area is not necessarily associated with (sibling) the left and / or right side panels with a fixed width, so I use Flexbox to create three columns with flex-grow: 1 in the main content.

I found out from @ Marc Audet's accepted answer on How can I set a fixed div position to inherit the width of the parent? that setting width: inherit on a fixed element tends to solve this problem, but it only seems to work where the specified width is on the parent, which doesn’t help me consider that I need the main content area to fill the remaining page width.

Does anyone have any ideas around this? Check out my Fiddle for code / example. Any help would be appreciated!

Answer 1

CSS

 html { box-sizing: border-box; font: 400 16px/1.45 'Source Code Pro'; } *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; outline: none; overflow-x: hidden; } body { background: #121; color: #FEF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100vw; height: 100vh; } .container { display: flex; color: #fff; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; background: blue; } .left { background: blue; min-height: 100vh; min-width: 150px; flex-shrink: 0; } .middle { background: green; min-height: 100vh; overflow: hidden; width: calc(100vw - 400px); padding-bottom: 60px; flex-grow: 1; flex-shrink: 0; } .middle .fixed-footer { background: orange; position: fixed; bottom: 0; width: 100vw; width: inherit; padding: 16px 0; overflow-x: hidden; } .right { background: blue; min-height: 100vh; min-width: 250px; flex-shrink: 0; } @media screen and (min-width: 640px) { html { margin-left: calc(100vw - 100%); margin-right: 0; overflow-y: auto; } } 

Added ipsum content for Star Wars to demonstrate the vertical flexibility of .middle and how .fixed-footer is stationary and has a width of .middle .

Demo