Two auto width flexbox columns with only one that wraps - html

Question

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.
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.
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.
My desired result would be something like this image example:
https://jsfiddle.net/j9v70qvy/
<div id="header-middle">
<div class="container">
<div class="row align-items-center">
<div class="header-middle-mobile-menu-outer col col-auto hidden-md-up">
<a class="header-middle-mobile-menu-toggle">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="logo-outer col col-auto">
<div class="logo-image">
<a href="#">
<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiamcGxuM3VAhUTwWMKHVWaBgMQjRwIBw&url=http%3A%2F%2Fwww.freepik.com%2Ffree-vector%2Flogo-sample-text_701628.htm&psig=AFQjCNEHXsgvhjDI__g4Vk4GETXnCeRu6A&ust=1502481095339508">
</a>
</div>
</div>
<div class="d-flex col pl-0 pr-0 align-items-center justify-content-end justify-content-md-start">
<div class="flex-wrap header-middle-menu-outer col col-auto hidden-sm-down">
<nav class="header-middle-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Sample Page</li>
<li>Terms and Conditions</li>
<li>Privacy Policy</li>
</ul>
</nav>
</div>
<div class="header-middle-social-media-icons-outer col col-auto">
<nav class="header-middle-social-media-icons text-center icons-circle icons-sm">
<ul class="social-media-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
</nav>
</div>
</div>
</div>
</div>

Answer 1

Okay, I think I finally figured out what the deal is. The Bootstrap defaults for some classes you have are different from what you want in this case.
You need to override the default styling for .col-auto on .header-middle-menu-outer. It is the flex-shrink value of 0 in the shorthand flex property that is killing you. Since the columns aren't allowed to shrink, you're getting things pushed off the side of the screen, and no wrapping is happening.
The default flex styling will suffice for .header-middle-menu-outer, so you can just use this in your CSS:
.header-middle-menu-outer.col {
flex: initial;
}
That will set things back to the default of flex: 0 1 auto, which will mean that the left column will be allowed to shrink while the right column will continue not shrinking. So the left column will wrap, and the right won't.
I would say you could simply strip away the col-auto class (which you may do anyway), but then you'd fall back to the styling for .col, which also includes the same problematic style: flex: 0 0 auto. So unless you want to remove that class too, you'll probably have to use an overriding style in your CSS either way.
Updated fiddle.
As a side note, I'd recommend you re-visit which classes you include on each element. If you inspect things in your browser console, you'll see that you have a lot of competing styles being applied by those classes, which aren't helping you out any. For example, .d-flex contains both justify-content-end and justify-content-md-start, which do exactly the opposite thing. But in this case, I believe you need neither. In the fiddle I linked above, if you delete both those classes, the layout doesn't change at all.
Also, the classes col-auto and col are very similar. In the case above for .header-middle-menu-outer, even though removing col-auto won't fix your problem, you might do it anyway because I'm not sure that class is really adding anything at this point.
I suspect there are many classes you could eliminate and then if there is a certain style rule for one of those removed classes that you want to include, just drop that in your stylesheet as a one-off.