title: Fixed position element inheriting width of flex item
body: <p>I'm building out a UI that requires a fixed position/sticky element at the bottom of the viewport with a width constrained by a main content area. The main content area is optionally flanked by (sibling) left and/or right sidebars with fixed widths, so I'm using Flexbox to build the three column structure with <code>flex-grow: 1</code> on the main content.</p>
  
  <p>I've learned from @Marc Audet's accepted answer at <a href="https://stackoverflow.com/questions/27982966/how-can-i-make-a-fixed-positioned-div-inherit-width-of-parent">How can I make a fixed positioned div inherit width of parent?</a> that setting <code>width: inherit</code> on the fixed element is typically how to solve this problem, but it only seems to work when there's a specified width on its parent, which doesn't help me considering I need the main content area to fill the remaining width of the page.</p>
  
  <p>Does anyone have any ideas for getting around this? Check out my <a href="https://jsfiddle.net/wfc3n6zk/" rel="nofollow noreferrer">Fiddle</a> for the code/example. Any help would be appreciated!</p>