I'm trying to create a three-column layout on my website using flexboxes.
However, the 'commentCaMarche' div is not behaving as expected and is appearing at the top of the 'details-index' column. Any ideas on how to fix this issue?
#credits {
font-family: 'Roboto Condensed', sans-serif;
color: #FFFFFF;
height: 100vh;
background-color: #FB3D00;
margin-bottom: 0;
}
#columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
order: 1;
display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/
flex-direction: column;
justify-content: space-around;
}
(...)
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
order: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
(...)
#sources {
font-size: 1.4vmin;
text-align: center;
flex: 1;
order: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
}<div id='credits'>
<div id='columns'>
<div id='commentCaMarche'>
<h2>How it works</h2> (...)
</div>
<div id='details-index'>
<h2>The Details</h2> (...)
</div>
<div id='sources'>
<h2>Data Sources</h2> (...)
</div>
</div>
</div>