title: CSS: Push flex container item to next row on overflow
body: <p>I have a flex row with 2 divs (<code>.box-1 and .box-1</code>) both containing some content. What I would like is they both stay in the same row until the content in <code>.box-1</code> gets long enough to push <code>.box-2</code> to the next line. </p>
  
  <p><code>.box-2</code></p>
  
  <ul>
  <li>Should have a fix width at a desktop screen size.</li>
  <li>Should be 50% width on tablet. </li>
  <li>Should be full width on mobile. </li>
  </ul>
  
  <p>Right now as you can see from the snippet below the contents in <code>.box-2</code> will overflow but remain in the same line. <strong>What I want is for <code>.box-2</code> to be pushed to a separate line when content overflows</strong>. OR the miniumum width of <code>.box-2</code> to be wide enough to always hold the contents of my box. </p>
  
  <p>NOTE: One issue I was facing using the <code>col-lg-3</code> class is that is will become too small for the contents of my <code>.box-2</code> at times. </p>
  
  <p>I'm trying to use the css gird and stick with bootstrap classes for this. Trying to avoid custom styling as much as possible. The <code>.wrappable</code> class below is a standard in the library i'm using so can't be changed. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    max-width: 300px; 
  }
  
  .wrappable {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-align-items: center;
      align-items: center;
        margin-right: -0.625rem;
      margin-bottom: -0.625rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
  &lt;div class="wrappable"&gt;
    &lt;div class="box-1 wrappable-flex border rounded item-1"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, incididunt  ut labore et 
    &lt;/div&gt;
    &lt;div class="box-2 col-sm-12 col-md-6 col-lg-3 border rounded text-nowrap"&gt;
    some other text I want to put in the same row 
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>