How to make my columns wrap into another column?

Andres Soza 0
Viewed 38

I have been doing some homework and I'm having some issues related with flex-wrap, since I have some columns which I would like them to wrap at least in two columns, instead they are flowing out my container

Note: I know this can be made with grid too, but I wanted to give it a try with flex!

  1. Expected Result: see screenshot
  2. 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>

flexbox css html
1 Answers

Try this:

#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;
    max-height: 100%;
}

#sct-blazrobar .content div {
    padding: 0 10px;
}

#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">
    <div>
      <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>
    <div>
      <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>
  </div>
</section>

Rizeen0
Related