Предотвратить рост гибкой коробки - PullRequest
Новая
       6

Предотвратить рост гибкой коробки

0 голосов
/ 26 мая 2020

Я пробовал все решения, которые мог найти. flex-grow, flex-shrink, align-items:flex-start, flex-basis и установка окончательного width:50%, et c. и я не могу понять этого. Вот скриншот, в левом и правом столбцах должно быть 50%.

enter image description here

Вот мой код в его нынешнем виде: 

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

Попытки: 

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

Ни одно из вышеперечисленных «решений» не решило проблему. <main> и <section> слева (50%) и справа (50%), и здесь единственная проблема. Все остальное содержимое внутри main и section, я буду беспокоиться о себе после того, как main и section будут на 50%.

Я заранее благодарен за помощь. Спасибо.

ОБНОВЛЕНИЕ: Я смог решить свою проблему, но не уверен, что это предложенный способ. Я добавил <div class="fifty> в качестве родительского к <main> и <section>, затем установил родительский div на ширину: 50%;

...