防止弹性项目折叠

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`

而不是 height: 150px 使用 min-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>

防止弹性项目折叠

Prevent flex item from collapsing

html

css

overflow

flexbox

使用`min-height`

禁用`flex-shrink`

防止弹性项目折叠

Prevent flex item from collapsing

html

css

overflow

flexbox

使用min-height

禁用flex-shrink

使用`min-height`

禁用`flex-shrink`