Column flexbox fitting within another column flexbox - css

Question

I'm trying to get a UI that looks somewhat like this:
In the image pretend the top bar with "New York..." and the "Book it" button are fixed and the stuff between is scrollable.
The HTML I have so far is this (note that the .button and .form are just divs to try to keep the example as simple as possible)
<div class="wrapper">
<div class="sidebar"> <!-- Hidden from UI unless you swipe left to right --> </div>
<div class="inner-wrapper">
<div class="header">Title here</div>
<div class="balance-bar">$0</div>
<div class="app-content">
<div class="body-content">
<div class="form">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="button">Submit</div>
</div>
</div>
</div>
</div>
The CSS is:
.button, input {
width:100%;
box-sizing: border-box;
}
.wrapper {
border: 2px solid blue;
height:200px;
overflow: auto;
}
.header {
background: lightblue;
flex-shrink: 0;
}
.balance-bar {
background: lightgreen;
flex-shrink: 0;
}
.inner-wrapper {
border: 2px solid red;
display: flex;
flex-direction: column;
}
.app-content {
border: 2px solid green;
overflow:auto;
}
.body-content {
border: 2px solid orange;
display: flex;
flex-direction:column;
}
.form {
}
.button {
background: pink;
flex-shrink: 0;
}
If I move the button outside the form and as a child of the first flexbox (so .button would be a sibling of .app-content) this all works great and you don't even need a flexbox within a flexbox. One flexbox works perfect. The issue tho is that the semantics are all wrong, you don't get built in browser features like enter to submit, and the flow for the JS to get it to work is super janky.
I was hoping with flexbox I can set the wrapper to the height of the window and flexbox would just calculate all children to fit within the window (which it does, but not for children set to flex)
http://jsbin.com/gumozexihi/1/edit?html,css,output

Answer 1

I hope this helps. I kept the button inside the form and gave it a position: fixed and a bottom: 0.
HTML:
<div class="wrapper">
<div class="inner-wrapper">
<div class="header">Header</div>
<div class="balance-bar">$0</div>
<div class="app-content">
<div class="body-content">
<div class="form">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<div class="button">Submit</div>
</div>
</div>
</div>
</div>
</div>
And the CSS:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.inner-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.app-content {
flex: 1;
overflow: auto;
}
.body-content {
height: 1000px;
display: flex;
flex-direction: column;
}
.button {
position: fixed;
bottom: 0;
width: 100%;
}
I added height: 1000px to .body-content to mimic having more content than the available screen height. And I fixed the button to the bottom using position: fixed and bottom: 0, which may not be ideal solutions but it seems to work while keeping the button inside the form element.
Update
Just saw you specifically didn't want to use a fixed position on the button. If I can find another solution I'll edit this response, but for a single button this should do the trick.