Prevent flex box from growing

Question

I have attempted all solutions I could find. flex-grow, flex-shrink, align-items:flex-start, flex-basis, and setting a definitive width:50%, etc. and I can't seem to figure this one out. Here is a screenshot, both the left and right columns should be 50%.

Here is my code as it stands now:

.pageContainer {
display:flex;
flex-direction:row;
width:80%;
min-height:60vh;
margin:12px auto;
background-color:@veryLightBlue;
}

.main {
display:flex;
flex-direction:row;
flex-wrap:wrap;
width:50% !important;
flex-basis:50%;
}

.section {
display:flex;
flex-direction:row;
flex-wrap:wrap;
width:50% !important;
flex-basis:50%;
flex:1;
}

.box {
width:90%;
height:216px;
margin:24px auto;
border:3px solid @lightBlue;
font-family:arial;
position:relative;
line-height:1.3;
}

HTML:

    <!-- CONTENT -->
    <main> <!-- LEFT: Set Width to 48% -->
        <div class="box">
            <h2>Volunteers</h2>
            <div class="flex-image">
            <img src="volunteer.jpg" alt="Volunteer on School in the Cloud" />
            <p>Are you out of the game? No worries! We're here to provide you with the tools to connect with students
                that need your mentorship, training, and knowledge. Register Today!
            </p>
            </div>
            <a href="register" title="Register Today">Register</a>
        </div>
        <div class="box">
            <h2>Students</h2>
            <div class="flex-image">
            <img src="student.jpg" alt="Students on School in the Cloud" />
            <p>Do you need to learn something? To learn anything? We've got the mentors and instructors to make that
                happen. How about some Ninjitsu... or fishing? Need help with Algebra? Find your course! Register
                Today!
            </p>
            </div>
            <a href="register" title="Register Today">Register</a>
        </div>
        <div class="box">
            <h2>Admins</h2>
            <div class="flex-image">
            <img src="admin.jpg" alt="Be an Admin on School in the Cloud" />
            <p>Help to facilitate the volunteers with features such as "to-do lists" and more. Register Today as an
                Admin.
            </p>
            </div>
            <a href="register" title="Register Today">Register</a>
        </div>
    </main>

    <section> <!-- RIGHT: Set Width to 48% -->
        <div class="box">
            <h2>Top 5 Classes Today</h2>
            <div class="flex-courses">
            <img src="Ninjitsu.jpg" alt="Learn Ninjitsu Today" />
            <p class="description">Learn the art of Ninjitsu Today<br />
                <span style="font-size:1.2rem; color:darkBlue">Read More</span>
            </p>
            <p class="price">$30.00
                <a href="register" title="Register Today">Register</a>
            </p>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer>

    </footer>

</div>

Attempts:

flex-grow:0;
flex-shrink:0;
align-items:flex-start;
flex-basis:50%;
width:50%;

None of the above "solutions" fixed the problem. <main> and <section> are left (50%) and right (50%) and the only issue here. All other content inside of main and section, I'll worry about myself after main and section are at 50%.

I appreciate the help in advance. Thank You.

UPDATE: I was able to solve my problem, but not sure if it's the suggested way. I added <div class="fifty> as a parent to <main> and <section>, then set the parent div to width:50%;

Answer 1

To make equal columns with flexbox you have to set

flex-grow: 1;
flex-shrink: 0;
flex-basis: 0%; // attention, not 50%!

for flex children elements. Also it's possible to do so with shortcut:

flex: 1 0;