Content can be hidden using CSS flexbox with overflow - html

Question

I'm new to using flex boxes in CSS. But this seems very nice for alignments and free space distribution between components!
Today I have a problem I don't manage to solve. Thanks in advance for your help.
Here is a codepen to illustrate the problem quickly :
https://codepen.io/anon/pen/BYdzqR
#example1 .wrapper, #example1bis .wrapper{
justify-content: space-between;
}
#example2 .wrapper, #example2bis .wrapper{
justify-content: space-evenly;
}
#example3 .wrapper, #example3bis .wrapper{
justify-content: space-around;
}
#example4 .wrapper, #example4bis .wrapper{
justify-content: center;
}
#example4 .content .group, #example4bis .content .group {
margin: auto;
}
#example1, #example2, #example3, #example4{
height: 600px;
}
#example1bis, #example2bis, #example3bis, #example4bis{
height: 300px;
}
.root{
/* background: lightblue; */
margin-bottom: 20px;
display: flex;
}
.box {
width: 300px;
height: 300px;
border: 1px solid gray;
text-align: center;
margin: 0 20px;
flex: 0 0 auto;
}
.wrapper {
display: flex;
flex-flow: column nowrap;
height: 100%;
}
/* ----------------------------- */
/* Top */
/* ----------------------------- */
.top {
padding: 20px 0;
overflow: hidden;
flex: 0 0 auto;
border-bottom: 1px solid lightgray;
}
/* ----------------------------- */
/* Content */
/* ----------------------------- */
.content {
padding: 10px;
overflow-y: auto;
flex: 1 1 auto;
}
.content .group {
flex: 0 0 auto;
background: yellow;
width: 100%;
}
.content h2 {
margin: 0;
padding: 0;
color: red
}
/* ----------------------------- */
/* Bottom */
/* ----------------------------- */
.bottom {
text-align: center;
width: 100%;
padding: 20px 0;
overflow: hidden;
flex: 0 0 auto;
border-top: 1px solid lightgray;
}
<h1>Reference : without overflow</h1>
<p>Different kind of free space allocation. What I would like is something like #2 ("justify-content: space-evenly"). Eventually #3 ("space-around") or #4 ("center", with "margin: auto" on items)</p>
<div class="root">
<div id="example1" class="box">
<div class="wrapper">
<div class="top">
#1 : space-between
</div>
<div class="content wrapper">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
</div>
<div id="example2" class="box">
<div class="wrapper">
<div class="top">
#2 : space-evenly
</div>
<div class="content wrapper">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
</div>
<div id="example3" class="box">
<div class="wrapper">
<div class="top">
#3 : space-around
</div>
<div class="content wrapper">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
</div>
<div id="example4" class="box">
<div class="wrapper">
<div class="top">
#4 : center
</div>
<div class="content wrapper">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
</div>
</div>
<h1>Problem : with overflow</h1>
<p>The problem is when there is not enough free space to display all the content. "overflow-y: auto" should allow to scroll to see all the content, but this is not the case with #2, #3 and #4... ("Section 1" title hidden)</p>
<div class="root">
<div id="example1bis" class="box">
<div class="wrapper">
<div class="top">
#1bis : space-between = OK
</div>
<div class="content wrapper">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
</div>
<div id="example2bis" class="box">
<div class="wrapper">
<div class="top">
#2bis : space-evenly = KO
</div>
<div class="content wrapper">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
</div>
<div id="example3bis" class="box">
<div class="wrapper">
<div class="top">
#3bis : space-around
</div>
<div class="content wrapper">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
</div>
<div id="example4bis" class="box">
<div class="wrapper">
<div class="top">
#4bis : center
</div>
<div class="content wrapper">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
</div>
</div>
Explanation :
I have some "boxes" (in fact they are modals) with a header, a footer, and some content between. I would like the header and footer parts always visible, and the content scroll if too big to display all.
In the content part, I have several "sections" (groups of other items).
I would like these "groups" to be equidistant from each other (ie: free space between grows when it can. I saw the flex container property justify-content: space-evenly that is exactly what I want.
This is fine when I have to much space to display my content. I takes all the available space with "harmony".
The problem is when I have many content and that it cannot be displayed. So all the "groups" will be sticked. fine. I put my content an overflow-y: auto so it will scroll in that case.
But with justify-content: space-evenly, I can't access the top of my content even when the scroll is at the top. It is OUTSIDE the content wrapper...
Same problem with justify-content: space-around or justify-content: center + margin: auto on the flex items.
The only working solution is justify-content: space-between, but unfortunately this is not the behaviour I want...
What can I do to achieve this and have access to all my content if there is a scroll ??
Thanks.

Answer 1

space-evenly is a new property and won't work cross browsers (read more at the end).
As of today, you could use auto margin, where in this case all group items get a bottom auto margin, and the first also get a top auto margin.
That will generate the output you asked for.
Updated codepen
Stack snippet
body {
margin: 0;
}
.wrapper {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.content {
padding: 10px;
overflow: auto;
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
}
.content .group {
margin-bottom: auto;
flex: 0 0 auto;
background: yellow;
}
.content .group:first-child {
margin-top: auto;
}
.content h2 {
margin: 0;
padding: 0;
}
.top, .bottom {
text-align: center;
padding: 20px 0;
overflow: hidden;
flex: 0 0 auto;
border: 1px solid lightgray;
}
<div class="wrapper">
<div class="top">
auto margin
</div>
<div class="content">
<div class="group">
<h2>Section 1</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 2</h2>
<p>blah</p>
</div>
<div class="group">
<h2>Section 3</h2>
<p>blah</p>
</div>
</div>
<div class="bottom">
footer
</div>
</div>
Even with space-evenly one also need to add yet another new feature, a new keyword called safe, though it is still a working draft, and not many (if any) browsers support it yet.
And the reason is, when using e.g. justify-content, the overflow, in this case when using column direction, will be at both the top and bottom of the flex container.