Separate two columns using flexbox - css

Question

I'm new in css
I create two columns using flexbox, so I want to divide them 50% and 50%.
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
color: #383838;
border-right: 1px solid gray;
}
blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
color: #0e4f1f;
text-align: center;
}
#about-us{
display: flex;
}
.about-us__slogan{
margin:6em 0 0 2em;
text-align: center;
}
.about-us__business{
flex:50%;
}
.about-us__business__title{
color:#0e4f1f;
margin: 2em 0 0 2em;
}
.about-us__business__info{
text-align:left;
}
<section id="about-us">
<p class="about-us__slogan"><blockquote>
“Neque porro quisquam est qui dolorem <br/>
Neque porro quisquam est qui dolorem<br/>
Neque porro quisquam est qui dolorem<br/>
Neque porro quisquam est qui dolorem.</p>
</blockquote>
<div class="about-us__business">
<h1 class="about-us__business__title">Neque porro quisquam est qui dolorem</h1>
<p class="about-us__business__info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
porro.</p>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
pNeque porro quisquam est qui dolorem ipsum quia dolor sit amet.</p>
</div>
</section>
As you can see it's not 50% and 50%, I try using flex:50%. in .about-us__slogan class but it no work, it just create big space at the left.
I think it's not that dimensions because size wrap to the content, how can I fix that? Regards

Answer 1

Your child divs about-us__slogan & about-us__business both needed to be flex:1 so they are equal in size to each other with their parent div about-us with display: flex.
Some of your nesting had also got a little messed up in your example code above so I have tidied it a little for you also.
Try this:
.about-us {
display: flex;
}
.about-us__slogan {
flex: 1;
margin: auto 1rem;
border-right: 1px solid gray;
}
.about-us__blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
color: #383838;
text-align: center;
margin: 0;
}
.about-us__blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
color: #0e4f1f;
}
.about-us__business {
flex: 1;
margin: auto 1rem;
}
.about-us__business-title {
color: #0e4f1f;
}
.about-us__business-info {
/* Add styles you would like to use if any */
}
<section class="about-us">
<div class="about-us__slogan">
<blockquote class="about-us__blockquote">
<p class="about-us__slogan-text">
Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem.</p>
</blockquote>
</div>
<div class="about-us__business">
<h1 class="about-us__business-title">Neque porro quisquam est qui dolorem</h1>
<p class="about-us__business-info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. porro.</p>
<p class="about-us__business-info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet Neque porro quisquam est qui dolorem ipsum quia dolor sit amet Neque porro quisquam est qui dolorem ipsum quia dolor sit amet Neque porro quisquam est qui dolorem ipsum quia dolor sit
amet pNeque porro quisquam est qui dolorem ipsum quia dolor sit amet.</p>
</div>
</section>