title: Prevent flex item from collapsing
body: <p>How can I fix the title and make sure it will display?</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>.cont {
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 150px;
    border: 1px solid red;
    overflow: hidden;
  }
  
  .title {
    display: flex;
    background: #ccc;
    justify-content: space-between;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cont"&gt;
    &lt;div class="title"&gt;
      &lt;div&gt;title that collapse&lt;/div&gt;
      &lt;div&gt;28/3/2018&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab sapiente provident iure ipsa ipsum nulla distinctio vero nisi officiis, id accusantium perferendis enim quisquam. Optio est deserunt atque, explicabo enim excepturi aliquid expedita rerum
      voluptates similique ipsam vitae sapiente sequi at earum.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/anon/pen/xWYZEK" rel="nofollow noreferrer">https://codepen.io/anon/pen/xWYZEK</a></p>