title: Two auto width flexbox columns with only one that wraps
body: <p>I have two auto width flexbox columns displayed inline.  I expect to have dynamic content in the columns so I am trying to figure out a way to wrap only the first column which contains the menu items.</p>
  
  <p>I know I can wrap both of them using the "flex-wrap" class on the "d-flex" div but I only want to wrap the first auto width column while keeping the two columns inline of each other.</p>
  
  <p>I am using Bootstrap 4 CSS which already contains the flexbox classes I am using, please see an example on the fiddle I've provided.</p>
  
  <p>My desired result would be something like this image example: <a href="https://i.stack.imgur.com/fl5rC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fl5rC.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/j9v70qvy/" rel="nofollow noreferrer">https://jsfiddle.net/j9v70qvy/</a></p>
  
  <pre><code>&lt;div id="header-middle"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row align-items-center"&gt;
          &lt;div class="header-middle-mobile-menu-outer col col-auto hidden-md-up"&gt;
              &lt;a class="header-middle-mobile-menu-toggle"&gt;
                  &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="logo-outer col col-auto"&gt;
              &lt;div class="logo-image"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="https://www.google.com/url?sa=i&amp;rct=j&amp;q=&amp;esrc=s&amp;source=images&amp;cd=&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwiamcGxuM3VAhUTwWMKHVWaBgMQjRwIBw&amp;url=http%3A%2F%2Fwww.freepik.com%2Ffree-vector%2Flogo-sample-text_701628.htm&amp;psig=AFQjCNEHXsgvhjDI__g4Vk4GETXnCeRu6A&amp;ust=1502481095339508"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="d-flex col pl-0 pr-0 align-items-center justify-content-end justify-content-md-start"&gt;
              &lt;div class="flex-wrap header-middle-menu-outer col col-auto hidden-sm-down"&gt;
                  &lt;nav class="header-middle-menu"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Sample Page&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Terms and Conditions&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
              &lt;div class="header-middle-social-media-icons-outer col col-auto"&gt;
                  &lt;nav class="header-middle-social-media-icons text-center icons-circle icons-sm"&gt;
                      &lt;ul class="social-media-icons"&gt;
                          &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-youtube"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>