Wrapped flex row items start at top [duplicate] - css

Question

This question already has answers here:
What's the difference between align-content and align-items?
(15 answers)
CSS Flexbox: difference between align-items and align-content [duplicate]
(2 answers)
Closed 5 years ago.
Whilst trying to answer this question, I was trying to come up with a flex solution. The closest I could get was this:
.container {
height: 500px;
width: 500px;
background-color: red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-between; /* puts spacing between left and right column */
}
.headerTitle {
width:100%;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width: 249px;
height: 200px;
background-color: yellow;
}
.rightSideDiv {
width: 249px;
height: 200px;
border: 4px solid green;
box-sizing:border-box; /* need this otherwise border will take an extra 8px width in some browsers */
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
However, I couldn't make the 2 lower boxes start flush to the top heading. Is there a way of doing this using flex? I tried align-items and align-self but that didn't seem to do anything.
I also tried adding a pseudo element to the container with flex-grow:1; but it didn't grow in the required manner.
It would be interesting to see if flex can handle this as I'm still trying to learn the intricacies of it

Answer 1

Just add align-content: flex-start to the .container div:
.container {
height: 500px;
width: 500px;
background-color: red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-between; /* puts spacing between left and right column */
align-content: flex-start;
}
.headerTitle {
width:100%;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width: 249px;
height: 200px;
background-color: yellow;
}
.rightSideDiv {
width: 249px;
height: 200px;
border: 4px solid green;
box-sizing:border-box; /* need this otherwise border will take an extra 8px width in some browsers */
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>