title: Disable column wrapping in Bootstrap 4
body: <p>I'm currently faced with the following situation:</p>
  
  <pre><code>&lt;div class="row no-gutters"&gt;
      &lt;div class="col"&gt;&lt;/div&gt;
      &lt;div class="col col-auto"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, the first column will occupy the space available that is not being filled by the second column</p>
  
  <p>i.e.
  [ |--------column1--------| |column2| ]</p>
  
  <p>My issue is when the content inside <code>column1</code> has a width larger than the containing row. What happens is, instead of <code>column1</code> shrinking to still fit both columns in the same row line, <code>column1</code> fills the whole row as if it was <code>col-12</code> and <code>column2</code> drops down to a new line, hence wrapping the columns.</p>
  
  <p>Is there way to prevent this behaviour and always keep both columns in the same line?</p>