While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container.
Note: I am aware that this can be achieved with grid as well, but I wanted to experiment with flex!
- Expected Result: see screenshot
- Current Result: see screenshot
#sct-blazrobar {
background: #ebebeb;
padding: 90px;
}
#sct-blazrobar h2 {
font-size: 30px;
margin-bottom: 25px;
font-weight: 400;
color: #088ca5;
}
#sct-blazrobar .content {
display: flex;
flex-flow: column wrap;
max-height: 100%;
}
#sct-blazrobar .content p {
font-size: 18px;
font-weight: 400;
line-height: 22px;
color: var(#515151);
margin-bottom: 25px;
}
#sct-blazrobar .content p:last-child {
margin-bottom: 0;
}
<section id="sct-blazrobar">
<h2>BlazRobar.com</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula ipsum non leo tristique eget facilisis lacus commodo. Curabitur vitae justo lorem, non ornare nibh. Pellentesque pretium, tellus ac ultrices faucibus, nibh mauris dapibus lorem, vitae viverra nisl elit sit amet libero. Nam eu blandit risus.
</p>
<p>Phasellus imperdiet mattis nulla. Integer gravida imperdiet congue. Proin vitae pretium augue. Donec est sem, mattis et blandit ac, blandit at arcu. Donec tempus tincidunt suscipit. Suspendisse eu vulputate lacus.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula ipsum non leo tristique eget facilisis lacus commodo. Curabitur vitae justo lorem, non ornare nibh. Pellentesque pretium, tellus ac ultrices faucibus, nibh mauris dapibus lorem, vitae viverra nisl elit sit amet libero. Nam eu blandit risus.
</p>
<p>Phasellus imperdiet mattis nulla. Integer gravida imperdiet congue. Proin vitae pretium augue. Donec est sem, mattis et blandit ac, blandit at arcu. Donec tempus tincidunt suscipit. Suspendisse eu vulputate lacus.
</p>
</div>
</section>