title: How to make content be on the next line if there is no space in div
body: <p>In my vue project I have component <code>Panel</code> and this code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;div class=&quot;account-container&quot;&gt;
        &lt;h1 class=&quot;account-header-title&quot;&gt;Account Information&lt;/h1&gt;
        &lt;div class=&quot;account-container-info&quot;&gt;
          &lt;Panel :title=&quot;'UUID'&quot; :text=&quot;`Your UUID: ${client.personaluuid}`&quot; /&gt;
          &lt;Panel :title=&quot;'Email'&quot; :text=&quot;`Your email: ${client.email}`&quot; :img=&quot;'email'&quot; /&gt;
          &lt;Panel :title=&quot;'Phone'&quot; :text=&quot;'Your mobile phone'&quot; :img=&quot;'phone'&quot; /&gt;
          &lt;Panel :title=&quot;'2FA'&quot; :text=&quot;'Your Google Authenticator status'&quot; :img=&quot;'google'&quot; /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Styles:</p>
  <pre class="lang-css prettyprint-override"><code>.account-container {
    width: 75%;
    margin: 0 auto;
    padding-top: 130px;
    .account-container-info {
      display: flex;
      justify-content: space-between;
      @media only screen and (max-width: 1000px) {
        display: block;
      }
    }
  }
  </code></pre>
  <p>And here is a problem, when I change page's width, I can see that those panels keep their sizes and I can scroll where I normally cannot. All I need to do, is to make that last panel be on next line, if there is no space in <code>div</code></p>
  <p>This looks like this:</p>
  <p><a href="https://i.stack.imgur.com/moZyP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/moZyP.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/mXiYm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mXiYm.png" alt="enter image description here" /></a></p>