CSS problem in creating a flexible list in two columns

Issue

I want to use flex property to have a list in two columns and become one column when the content of each item is out of the display.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .flexcontainer {
        display: flex;
        flex-wrap: wrap;
      }
      .leftflex,
      .rightflex {
        box-sizing: border-box;
        flex: 50%;
      }
      body {font-size: 30px;}
    </style>
  </head>
  <body>
    <ul class="flexcontainer">
      <span class="leftflex">
        <li>1 Lorem, ipsum.</li>
        <li>2 Lorem, ipsum.</li>
      </span>
      <span class="rightflex">
        <li>3 Lorem, ipsum.</li>
        <li>4 Lorem, ipsum.</li>
      </span>
    </ul>
  </body>
</html>


but there are two problems here:

  1. When I make the screen size smaller, each item becomes two lines but I want to have a single column before this happens.
    I want this:

    but I’ve got this:

    If I set white-space: nowrap; for the list, the text won’t wrap even in single column and it a is problem for long items:

    I know I can use @media (max-width: #px) but I want to change flex and wrap properties based on content not screen size only.
  2. Apparently flex does not consider bullet of list in fitting contents and I don’t know how to fix this
    (I tried to use calc function to set
    flex: calc(50%-10px) but didn’t work.) :

Solution

  1. The problem is with flex-basis. If you remove flex: 50% (which basically means flex-grow: 1 and flex-basis: 50%), you will essentially set flex-basis back to auto, and get the 1 column before the text begins wrapping. (might want to keep flex-grow so the whole container stills takes up a whole row).
  2. As for the bullets, you can specify list-style-position: inside, that will get rid of that weird overlap thing.

Your code will look like this:

.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    list-style-position: inside;
}
.leftflex,
.rightflex {
    box-sizing: border-box;
    flex-grow: 1;
}

Answered By – vietan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published