Is it possible in CSS alone to make a child element's width fit the viewport when its parent is wider than the viewport?
I am designing a user interface to fit within an existing, unresponsive, fixed-width site layout that I don't (yet) have any direct control over, and I'd like at least my interface to be responsive to fit mobile screens, even if the overall site layout does not. Pages incorporating my interface will at least be able to load an extra CSS file for the interface's styling, but leveraging this to alter the overall site layout on pages using my interface is a dicey proposition.
I'd rather not have to set a range of fixed-width breakpoints with @media queries if it's possible for CSS to scale my interface DIV width dynamically to fit any viewport size. For illustration, see this mockup:
...where I control the Content DIV and want its width to fit any viewport as shown, but I have no control over the fixed-width Container, Header and Footer DIVs