Prevent flex item from collapsing

Question

How can I fix the title and make sure it will display?

.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;
}

<div class="cont">
  <div class="title">
    <div>title that collapse</div>
    <div>28/3/2018</div>
  </div>
  <div>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.
  </div>
</div>

https://codepen.io/anon/pen/xWYZEK

Answer 1

Here are two options for solving this problem: min-height or flex-shrink.

Use min-height

Instead of height: 150px use min-height: 150px.

Since you've forced the box to have a fixed height, the content inside will overflow when necessary. With min-height, the box can expand to accommodate content.

.cont {
  display: flex;
  flex-direction: column;
  width: 250px;
  min-height: 150px; /* adjustment */
  border: 1px solid red;
  overflow: hidden;
}
.title {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

<div class="cont">
  <div class="title">
    <div>title that collapse</div>
    <div>28/3/2018</div>
  </div>
  <div>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.
  </div>
</div>

Disable flex-shrink

An initial setting of a flex container is flex-shrink: 1. This means that flex items are permitted to shrink in order to avoid overflowing the container.

Since you have a fixed height on the container, the title is shrinking so that all items can fit inside.

Therefore, an alternative to the min-height option is to disable flex-shrink.

.cont {
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 150px; /* back to original */
  border: 1px solid red;
  overflow: hidden;
}
.title {
  flex-shrink: 0; /* new */
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

<div class="cont">
  <div class="title">
    <div>title that collapse</div>
    <div>28/3/2018</div>
  </div>
  <div>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.
  </div>
</div>