I am building a single page web app that needs to run on both mobile phones and the desktop. Its based on custom elements - although that is not necessarily important for the substance of the question. I am attempting to achieve a layout like the following two (ascii) pictures
Mobile Phone Layout...
----------------
Page Header
----------------
Content
...
----------------
spare space
Action Buttons
----------------
App Tool Bar
----------------
Desktop Layout...
----------------
App Tool Bar
----------------
Page Header
----------------
Content
...
----------------
Action Buttons
spare space
----------------
The principal I am working on is that on a mobile phone I want the App Tool Bar and the Action Buttons as close to the thumbs as possible, on a desktop I want the layout more normal.
I can deal with the App Tool Bar easily enough, using flex box direction to column reverse, and a media query based on width of the device to change to flex box direction to column
I deal with Page Header <header> and the rest <section> with flex box direction column
So I am left with the content and action buttons. sections. Because I am using a custom element to layout this part and <slot> elements to import that actual content, I don't know how big they are going to be. They are effectively organised as
<div class="container">
<section class="scrollable">
<slot class="content"></slot>
</section>
<div class="action">
<slot name="action"></slot>
</div>
</div>
What I want to achieve is that the <section class="scrollable"> exactly wraps its content with the space below it containing the <div class="action"> and that as the content grows the <div> shrinks until its its natural size, at which point the <section> gains a scrollbar. I can then handle the <div> with a normal css of align-item: flex-end; and a media query of align-item: flex-start; to position
Trying all the combinations I can think of, I either end up with the action buttons squeezed to the bottom regardless, the content and buttons sharing the page 50/50 or the action buttons taking the entire space and the scrollable area shrunk to zero pixels high.