How Can I Ensure A Bootstrap Column Expands To Fit The Width Of Its Content When This Value Is Changed?

I have the following very simple Bootstrap grid system:

.col-sm-2 { border:1px solid; }

@media screen and (min-width: 480px) {
  .flex { display: flex; flex-wrap: wrap; }
  .flex > .col-sm-2 { flex: 1; width: auto; }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h2> RScheme </h2>
<div class="container-fluid">
  <div class="row flex">
    <div class="col-sm-2"><img src="http://placehold.it/200x200"></div>
    <div class="col-sm-2">Arrow</div>
    <div class="col-sm-2">Compound</div>
    <div class="col-sm-2">Arrow</div>
    <div class="col-sm-2">Compound</div>
    <div class="col-sm-2">Arrow</div>
  </div>
</div>

jsFiddle: http://jsfiddle.net/rbxth6ac/8/

Share