Configure CSS to generate a new column when overflow is reached

Question

I am generating a list of links dynamically using PHP, but this list is very large and I would like when it reaches a certain height in px the column is broken in 2, 3, or as many as necessary.

Ex.: Make a list even if it is in HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

is displayed in 2 or more columns when rendered.

Is there any way to do this using CSS and Bootstrap 3?

Answer 1

You got it with display:flex aligning as column and setting a max-height in the container

NOTE: The column numbers are automatic, and it will break according to the content, but the higher the height of the UL less text columns you will have. Do a test there changing the max-height from UL to better understand how this works. In short, the higher the UL height, the less content columns.

.col-md-12 {border: 1px solid;}
.listagem ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-height: 300px;
      }

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  />

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 listagem">

        <ul>

      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
      <li>item 11</li>
      <li>item 12</li>
      <li>item 13</li>
      <li>item 14</li>
      <li>item 15</li>
      <li>item 16</li>
      <li>item 17</li>
      <li>item 18</li>
      <li>item 19</li>
      <li>item 20</li>
      <li>item 21</li>
      <li>item 22</li>
      <li>item 23</li>
      <li>item 24</li>
      <li>item 25</li>
      <li>item 26</li>
      <li>item 27</li>
      <li>item 28</li>
      <li>item 29</li>
      <li>item 30</li>
      <li>item 31</li>
      <li>item 32</li>
      <li>item 33</li>
      <li>item 34</li>
      <li>item 35</li>
      <li>item 36</li>
      <li>item 37</li>
      <li>item 38</li>
      <li>item 39</li>
      <li>item 40</li>
      <li>item 41</li>
      <li>item 42</li>
      <li>item 43</li>
      <li>item 44</li>
      <li>item 45</li>
      <li>item 46</li>
      <li>item 47</li>
      <li>item 48</li>
      <li>item 49</li>
      <li>item 50</li>
      <li>item 51</li>
      <li>item 52</li>
      <li>item 53</li>
      <li>item 54</li>
      <li>item 55</li>
      <li>item 56</li>
      <li>item 57</li>
      <li>item 58</li>
      <li>item 59</li>
      <li>item 60</li>
      <li>item 61</li>
      <li>item 62</li>
      <li>item 63</li>
      <li>item 64</li>
      <li>item 65</li>
      <li>item 66</li>
      <li>item 67</li>
      <li>item 68</li>
      <li>item 69</li>
      <li>item 70</li>
      <li>item 71</li>
      <li>item 72</li>
      <li>item 73</li>
      <li>item 74</li>
      <li>item 75</li>
      <li>item 76</li>
      <li>item 77</li>
      <li>item 78</li>
      <li>item 79</li>
      <li>item 80</li>
      <li>item 81</li>
      <li>item 82</li>
      <li>item 83</li>
      <li>item 84</li>
      <li>item 85</li>
      <li>item 86</li>
      <li>item 87</li>
      <li>item 88</li>
      <li>item 89</li>
      <li>item 90</li>
      <li>item 91</li>
      <li>item 92</li>
      <li>item 93</li>
      <li>item 94</li>
      <li>item 95</li>
      <li>item 96</li>
      <li>item 97</li>
      <li>item 98</li>
      <li>item 99</li>
      <li>item 100</li>
        </ul>

      </div>
    </div>
  </div>