title: Flexbox - container width auto
body: <p>How to make width of the  <code>ul</code> in  <code>.menu-sub-col</code> to be equal to content width?</p>
  
  <p><a href="https://fiddle.jshell.net/j9ujfL2n/3/" rel="nofollow noreferrer">https://fiddle.jshell.net/j9ujfL2n/3/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu {
    position: absolute;
    z-index: 90;
    display: flex;
    flex-direction: row;
    top: 40px;
    left: 0;
    transition: transform 0.25s ease-in-out;
    transform: translateY(-100%);
    visibility: hidden;
  }
  .menu--visible {
    transform: translateY(0);
    visibility: visible;
  }
  .menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .menu li {
    cursor: pointer;
  }
  
  .menu-main {
    background-color: #3E5AE2;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    height: max-content;
  }
  .menu-main li {
    position: relative;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
  }
  .menu-main li:hover {
    color: #fff;
  }
  .menu-main li.active {
    background-color: #4B67E8;
    color: #fff;
  }
  .menu-main li.active:after {
    content: '';
    position: absolute;
    right: -8px;
    top: calc(50% - 8px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #4B67E8;
    clear: both;
  }
  .menu-main li i {
    margin-right: 15px;
  }
  
  .menu-sub:not(:empty) {
    padding: 20px 30px;
    display: flex;
    flex-direction: row;
    background: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  .menu-sub-col {
    padding-right: 25px;
  }
  .menu-sub-col:not(:last-child) {
    border-right: 1px solid #eeeeee;
    margin-right: 25px;
  }
  .menu-sub-col h4 {
    color: #bdbdbd;
    font-size: 12px;
    text-transform: uppercase;
  }
  .menu-sub-col ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    max-height: 180px;
  }
  .menu-sub-col li {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 4px;
    padding-left: 0;
    opacity: 0.75;
  }
  .menu-sub-col li:hover {
    color: #ffffff;
    opacity: 1;
    background: #4b67e9;
    box-shadow: -10px 0px 0px #4b66ea, 10px 0px 0px #4b66ea;
    transition: box-shadow 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    border-radius: 3px;
  }
  .menu-sub-col li i {
    margin-right: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="menu menu--visible"&gt;
    &lt;div class="menu-main"&gt;
      &lt;ul&gt;
        &lt;li class=""&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Monitoring&lt;/li&gt;
        &lt;li class="active"&gt;&lt;i class="mdi mdi-file-chart"&gt;&lt;/i&gt;Raporty&lt;/li&gt;
        &lt;li class=""&gt;&lt;i class="mdi mdi-format-list-bulleted"&gt;&lt;/i&gt;Ewidencja&lt;/li&gt;
        &lt;li class=""&gt;&lt;i class="mdi mdi-settings"&gt;&lt;/i&gt;System&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;!----&gt;
    &lt;div data-subname="reports" class="menu-sub"&gt;
      &lt;div class="menu-sub-col"&gt;
        &lt;h4&gt;Pojazdy&lt;/h4&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Trasa&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Doby&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Bazy&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Id&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Paliwo&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Prędkości&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Praca silnika&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Liczniki&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Pryw. Firm&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Statusy pracy&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Kursy&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Przeglądy&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;PIAP&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;PLK&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="menu-sub-col"&gt;
        &lt;h4&gt;Kierowcy&lt;/h4&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Obsada&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Id&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="menu-sub-col"&gt;
        &lt;h4&gt;Punkty własne&lt;/h4&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Dla pojazdu&lt;/li&gt;
          &lt;li&gt;&lt;i class="mdi mdi-earth"&gt;&lt;/i&gt;Dla POI&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!----&gt;
    &lt;!----&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>