防止弹性项目折叠

Question

如何修复标题并确保它能够显示？

.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

这里有两个解决此问题的选项：min-height 或 flex-shrink。

使用min-height

用min-height: 150px代替height: 150px。

由于您已强制框具有固定高度，因此内部的内容会在必要时溢出。使用min-height，框可以展开以容纳内容。

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

禁用flex-shrink

弹性容器的初始设置是flex-shrink: 1。这意味着允许弹性项目收缩以避免溢出容器。

由于容器的高度是固定的，因此标题正在缩小，以便所有项目都可以放入其中。

因此，min-height 选项的替代方法是禁用 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>