Why is flex-flow: column wrap not working as expected? - css

Question

In this example, I'm trying to use flex-flow: column wrap in tablet media query, to let Section Three fall under Section Two and Section Four fall under Section Three... I'm not sure what I'm doing wrong? Instead, there's a large gap under Section Two.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap');
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100vh;
}
body {
background-color: lightblue;
font-family: 'Roboto', sans-serif;
font-size: 16px;
position: relative;
padding-bottom: 50px;
}
ul {
padding: 0;
}
ul li {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
main {
padding-left: 16px;
padding-right: 16px;
display: flex;
flex-flow: column wrap;
}
#media screen and (min-width: 768px) {
main {
flex-flow: row wrap;
height: 10000px;
}
}
section {
margin: 24px 0;
}
#media screen and (min-width: 768px) {
section {
flex: 50%;
padding-left: 16px;
padding-right: 16px;
}
}
article p {
margin: 16px 0;
}
<main>
<section>
<h2>Section One</h2>
<article>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi nisi earum cupiditate error animi nesciunt quas, a possimus enim dignissimos deleniti autem non reiciendis assumenda culpa dolores quis nulla eveniet.</p>
<p>Veritatis at tenetur explicabo reprehenderit adipisci, nisi alias, dolores illum quibusdam fugiat dolorem corrupti facilis aspernatur quae cum odit eveniet, neque quisquam quam suscipit iste. Amet provident cum id quasi!</p>
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" alt="">
<p>Nihil quibusdam provident optio unde eaque asperiores est veritatis repudiandae officia distinctio deleniti fuga facere modi ipsam autem cum deserunt, facilis quia accusantium labore illum possimus corporis! Fugiat, mollitia vitae.</p>
</article>
</section>
<section>
<h2>Section Two</h2>
<article>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias eaque, impedit sint nobis dolore non porro accusantium ullam quas eligendi sequi suscipit nemo cumque quisquam ipsa harum nam beatae nesciunt!</p>
<p>Tenetur odit libero in ea odio hic voluptatibus amet officiis. Est unde quae ipsam in veritatis alias at ipsa sapiente delectus neque. Quis officiis minus quibusdam voluptate? Praesentium, recusandae libero.</p>
<p>Quod ipsum fugit saepe nisi at quae iure culpa magni, voluptatibus consectetur enim adipisci quo repellat ad est a eos voluptatem tenetur dolorem dolore! Ab iure tenetur dignissimos laborum officiis!</p>
</article>
</section>
<section>
<h2>Section Three</h2>
<article>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias eaque, impedit sint nobis dolore non porro accusantium ullam quas eligendi sequi suscipit nemo cumque quisquam ipsa harum nam beatae nesciunt!</p>
<p>Tenetur odit libero in ea odio hic voluptatibus amet officiis. Est unde quae ipsam in veritatis alias at ipsa sapiente delectus neque. Quis officiis minus quibusdam voluptate? Praesentium, recusandae libero.</p>
<p>Quod ipsum fugit saepe nisi at quae iure culpa magni, voluptatibus consectetur enim adipisci quo repellat ad est a eos voluptatem tenetur dolorem dolore! Ab iure tenetur dignissimos laborum officiis!</p>
</article>
</section>
<section>
<h2>Section Four</h2>
<article>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias eaque, impedit sint nobis dolore non porro accusantium ullam quas eligendi sequi suscipit nemo cumque quisquam ipsa harum nam beatae nesciunt!</p>
<p>Tenetur odit libero in ea odio hic voluptatibus amet officiis. Est unde quae ipsam in veritatis alias at ipsa sapiente delectus neque. Quis officiis minus quibusdam voluptate? Praesentium, recusandae libero.</p>
<p>Quod ipsum fugit saepe nisi at quae iure culpa magni, voluptatibus consectetur enim adipisci quo repellat ad est a eos voluptatem tenetur dolorem dolore! Ab iure tenetur dignissimos laborum officiis!</p>
<p>Tenetur odit libero in ea odio hic voluptatibus amet officiis. Est unde quae ipsam in veritatis alias at ipsa sapiente delectus neque. Quis officiis minus quibusdam voluptate? Praesentium, recusandae libero.</p>
<p>Quod ipsum fugit saepe nisi at quae iure culpa magni, voluptatibus consectetur enim adipisci quo repellat ad est a eos voluptatem tenetur dolorem dolore! Ab iure tenetur dignissimos laborum officiis!</p>
</article>
</section>
</main>