title: On Bootstrap how can I force the content to fit inside a specific column?
body: <p>On this project I'm working on, the user has the ability to decide which widgets (logo, search, sign in, cart button) are placed on this header up to a limit of 12 columns. They can decide how many columns each widget will take.</p>
  
  <p><a href="https://i.stack.imgur.com/vTmOD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vTmOD.png" alt="enter image description here"></a></p>
  
  <p>On this scenario, I have a widget that takes 2 bootstrap columns, but the entire content cannot fit inside.
  I must have the whitespace set to 'nowrap', which is making the content overflowing to the next column.</p>
  
  <p><strong>I would like to know if it's possible in CSS and how can I force the content of this column to expand and adapt to it's width when there's no room (maintaining the white-space set to 'nowrap').</strong></p>
  
  <p>Below is a simplified version of the HTML used (that still produces the problem I'm trying to fix)</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="row"&gt;
                  &lt;div class="col-md-2 col-sm-2 col-xs-2"&gt;
                          &lt;a class="logo" href="#" style=""&gt;&lt;img src="logo.png" alt="Logo"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
                          &lt;input type="text" class="form-control" placeholder="Search All Categories"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2 col-sm-2 col-xs-2 text-nowrap"&gt;
                          &lt;a&gt;&lt;span&gt;Hi, Sign In&lt;br&gt;&lt;strong&gt;Your Account&lt;/strong&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;a&gt;&lt;span&gt;Quick Order&lt;/span&gt; &lt;i class="fa fa-bolt"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2 col-sm-2 col-xs-2"&gt;
                          &lt;div class="cart-btn"&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS for the cart button</p>
  
  <pre><code>.cart-btn {
          width: 120px;
          height: 40px;
          display: inline-block;
          background-color: #292c2e;
          margin-left: 10px;
  }
  </code></pre>
  
  <p>A sample on JSFiddle reproducing this issue
  <a href="http://jsfiddle.net/scottx/mA6Za/438/" rel="nofollow noreferrer">http://jsfiddle.net/scottx/mA6Za/438/</a></p>
  
  <p>The idea is to allow the user to add these widgets to the header and make sure that all will load as supposed and prevent them from 'breaking' regardless of what widgets were added and how many columns they decide to assign for each one. So in this scenario, a user added the widget 'logo' taking 2 columns, the widget 'search' taking 6 columns, the widget 'various' which contains the sign in button, favorites, etc and is taking 2 columns, and the widget 'cart' also taking 2 columns. The problem I'm facing here is that the widget 'various' on smaller screens is too large to fit in 2 columns only.</p>
  
  <p>Probably what I'm trying to achieve is not possible in a way that if we're taking more space than assigned to a column, other column will have to lose space and I guess the browser doesn't know which one will be.
  I think this can be fixed with JS but I'd like to know if anyone might have a solution with CSS only.</p>
  
  <p>Thank you so much!</p>