Auto Width of Flex Column

How can I have auto-width content in flexbox without destroying the layout? (take as much space as necessary and as little space as possible)

Use white-space:nowrap on the second element so it does not collapse.

  .flex {  display: flex;  border: 1px solid green;}
.first {  background: lightblue;  border: 1px solid grey;}
.second {  white-space: nowrap;  background: lightgreen}
.narrow {  width: 50%;

<div class="flex">  <div class="first">    Here is my Dynamic Text  </div>  <div class="second">    Next to Text  </div></div><hr/>

<div class="flex narrow">  <div class="first">    Here is my Dynamic Text Here is my Dynamic Text  </div>  <div class="second">    Next to Text  </div></div>

Make flex items take content width, not width of parent container

Use align-items: flex-start on the container, or align-self: flex-start on the flex items.

No need for display: inline-flex.

An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.

The align-self property does the same thing as align-items, except that align-self applies to flex items while align-items applies to the flex container.

By default, align-self inherits the value of align-items.

Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretch is expanding the child element's width as much as it can. (The column setting is also the reason why display: inline-flex isn't working.)

You can override the default with align-items: flex-start on the container (which is inherited by all flex items) or align-self: flex-start on the item (which is confined to the single item).

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Set `width: auto` in flex-direction: column;

Place align-items:flex-start on the parent.

.parent {
  background: lightblue;
  padding: 10px;
  display: flex;
  flex-direction: column;
align-items: flex-start;
}
.child {
  display: flex;
  border: 2px solid green;
  border-radius: 4px;
  padding: 10px;
}

<div class='parent'>
  <div class='child'>
    <span>
      Some text
    </span>
  </div>
 </div>

How can I use flexbox' auto-width columns in bootstrap 4?

Bootstrap is mobile first.So it is necessary to add a different class for larger or smaller displays:

<div class="row">
    <div class="col-lg-6 col-md-6">
        <h4>My bills</h4>
        <div id="hccontainer_medabr" style="height:200px;"></div>
    </div>
    <div class="col-lg-6 col-md-6">
        <h4>My brother's bills</h4>
        <div id="hccontainer_medjan" style="height:200px;"></div>
    </div>
</div>

UPDATE:

It depends what version you are using. Maybe you are using outdated version. So I made with version where it works:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0 main">
            <h2>My Dashboard</h2>
            <br>
            <div class="container-fluid">
                <div class="container">
                    <div class="row text-white">
                        <div class="col border bg-primary">Column 1</div>
                        <div class="col border bg-primary">Column 2</div>
                        <div class="col border bg-primary">Column 3</div>
                        <div class="col border bg-primary">Column 4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <link rel="stylesheet" type="text/css"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" type="text/css"
        href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
    </script> -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
    </script>

Two auto width flexbox columns with only one that wraps

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.

How to make auto width for columns?

Add flex: 1; to your .col class. And also add flex to a tag as follows:

.row a{
  display: flex;
  flex: 1;
  background-color: #f0f2f5
}

Check it here.

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.row a{
  display: flex;
  flex: 1;
}

.col {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  flex: 1;
}

<div class="row">
  <a href="/" style='background-color: blue;'>
   <div class="col"> 
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> ABC </span>
   </div>
  </a>
  <a href="/" style='background-color: red;'>
   <div class="col">
     <img src="https://via.placeholder.com/100x100" alt="placeholder" />
     <span> DEF </span>
   </div>
  </a>
  <div class="col" style='background-color: green;'> 
    <img src="https://via.placeholder.com/100x100" alt="placeholder" />
    <span> View All Applications </span>
  </div>
</div>