How can I ensure a Bootstrap column expands to fit the width of its content when this value is changed?

Question

I have the following very simple Bootstrap grid system:

<div class="container-fluid">
  <div class="row">
     <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">    
      <div id="jsme_container"> </div>   
    </div>
    <div class="col-sm-2"  style="border-style:solid; border-color:black; border-width:1px;">
        Arrow
    </div>
    <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Compound</div>
    <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Arrow</div>
    <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Compound</div>
    <div class="col-sm-2" style="border-style:solid; border-color:black; border-width:1px;">Arrow</div>
  </div>
</div>

Currently for testing purposes, only the first column is filled with content - which is a custom drawing object the size of which can be specified using the following Javascript:

var width = "200px";
var height = "200px";

function jsmeOnLoad() {

  // width, height
  document.JME = new JSApplet.JSME("jsme_container", width, height, {

    "options": "edit,useopenchemlib", // depict in place of edit removes exterior editor window       

  }); 

}

I have included this in the following JSFiddle:

http://jsfiddle.net/mrc2016/rbxth6ac/

Please expand the result window to the left and ensure the fiddle is loaded over http not https.

I find that the height of the first column expands successfully to meet the value of "var height" of the jsme_container as set in the Javascript code. However, the same does not happen when the width of the jsme_container is changed. For example, when "var width = 100px", the contents sit within the first column, but when this value is changed to 200px, the contents expand out of the first column and into the second. My question is, how can I stop this from happening and how can I ensure the first (and ultimately all) columns expand to fit the width of their contents?

I apologise for the simplistic nature of this question but I am rather inexperienced with Bootstrap and CSS.

Any help/tips would be much appreciated.

Answer 1

In Bootstrap version 4.x, you can use col-sm-auto.