Keep the aside column fixed width in this flexbox layout - html

Question

I have a simple flexbox layout for a new website.
It has a header, a nav, a cover that is out of container in full screen and the a content and an aside.
#container {
margin: 0 auto;
max-width: 1080px;
}
#columns {
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
}
header {
padding: 3%;
background-color: #6495ED;
}
#cover {
max-width: 1350px;
margin: 0 -135px;
padding: 3%;
background-color: #6495ED;
}
header #title {
font-size: 50px;
color: #fff;
}
nav {
width: 97%;
background-color: #6495ED;
padding: 0 1.5% 0 1.5%;
}
nav ul li {
display: inline-block;
padding: 15px 1.5% 15px 1.5%;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
font-size: 1.2em;
}
nav ul li a:hover {
color: #000000;
text-decoration: none;
}
/* Content After
--------------------------------------------- */
#columns>#content {
padding: 3%;
width: 64%;
}
#columns>aside {
padding: 3%;
min-width: 24%;
background-color: #eee;
}
footer {
width: 94%;
padding: 3%;
background-color: #6495ED;
border-top: 5px solid black;
color: #fff;
text-align: center;
}
#media all and (max-width: 1350px) {
#cover {
max-width: 1080px;
margin: 0;
}
}
#media all and (max-width: 768px) {
header {
text-align: center;
}
nav {
text-align: center;
}
#columns {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
#columns>#content {
width: 94%;
padding: 3%;
}
#columns>#sidebar {
width: 94%;
padding: 3%;
border-top: 3px solid #E64A19;
}
}
#media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
<div id="container">
<!-- header -->
<header id="header">
<h1 id="title">Two Column</h1>
</header>
<!-- Navigation -->
<nav id="menu" class="clearfix">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<section id="cover">
</section>
<section id="columns">
<!-- Main Content area -->
<section id="content">
<!-- your content here -->
</section>
<!-- Sidebar -->
<aside id="sidebar">
<!-- your content here -->
</aside>
</section>
<footer id="footer" class="clearfix">
Copyright &copy Booo
</footer>
</div>
https://codepen.io/anon/pen/YQzWNe
The width of the aside column fixed for desktop and tablet, 360px, then when I go under 768 px of viewport the column disappear.
I try to replace the width in percentage with min-width:360px but I broke the layout.
How can I fix it?

Answer 1

You mention the aside "disappearing" but I see it re-flowing below #content on smaller viewports.
If you need aside to be 360px and have #content fill the remaining space set flex-grow: 1; for #content and tell #sidebar to be 360px.
#container {
margin: 0 auto;
max-width: 1080px;
}
#columns {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
#header,
#cover,
#footer {
padding: 3%;
background-color: #6495ED;
}
#cover {
max-width: 1350px;
margin: 0 -135px;
}
#title {
font-size: 50px;
color: #fff;
}
#menu {
background-color: #6495ED;
padding: 0 1.5%;
}
#menu ul {
margin: 1rem;
padding: 0;
}
#menu li {
display: inline-block;
padding: 15px 1.5%;
}
#menu a {
text-decoration: none;
color: #fff;
font-size: 1.2rem;
}
#menu a:hover {
color: #000;
}
/* Content After
--------------------------------------------- */
#content,
#sidebar {
padding: 3%;
}
#content {
flex-grow: 1;
}
#sidebar {
min-width: 360px;
background-color: #eee;
}
#footer {
border-top: 5px solid black;
color: #fff;
text-align: center;
}
#media all and (max-width: 1350px) {
#cover {
max-width: 1080px;
margin: 0;
}
}
#media all and (max-width: 768px) {
#header,
#menu {
text-align: center;
}
#columns {
-webkit-flex-direction: column;
flex-direction: column;
}
#sidebar {
border-top: 3px solid #E64A19;
}
}
#media all and (max-width: 330px) {
#menu li {
display: block;
padding: 0 3%;
}
}
<div id="container">
<!-- header -->
<header id="header">
<h1 id="title">Two Column</h1>
</header>
<!-- Navigation -->
<nav id="menu" class="clearfix">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<section id="cover">
</section>
<section id="columns">
<!-- Main Content area -->
<section id="content">
<!-- your content here -->
</section>
<!-- Sidebar -->
<aside id="sidebar">
<!-- your content here -->
</aside>
</section>
<footer id="footer" class="clearfix">
Copyright &copy Booo
</footer>
</div>
Note: Improved the CSS a little.