Solution 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 0;

Problem :

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%.

enter image description here

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%;

Comments

Comment posted by SRack

Could you add your HTML to this please?

Comment posted by Paulie_D

Your flex 1 statement is overriding the previous flex properties. In any case you can probably remove it entirely

Comment posted by Donald Faulknor

That was added later. Still didn’t work without flex:1;

Comment posted by Elisey

I think you mean: flex: 1 0 0 not 1 0. Because 1 0 0 is pretty well worked for me – I needed preventing flex growing when flex has many items. And at mdn docs that’s the right syntax for what you mentioned. Thanks by the way! 🙂

Comment posted by Lev Lukomsky

you are right, otherwise

By

Leave a Reply

Your email address will not be published. Required fields are marked *