CSS 如何避免 Flex:1 因其高度或宽度超出而挤坏布局

【效果图】

【HTML】

<div class="container">
  <h1 class="title">
    My title
  </h1>
  <div class="wrap">
    <span>My content</span>
  </div>
</div>

【CSS】

在不想被挤坏的盒子的CSS添加关键句：flex: 0 0 48px; 

其中48px是这个盒子的需要被固定的大小，根据需要设置

* {
  margin: 0;
  padding: 0;
}

html,body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title {
  height: 48px;
  background: skyblue;
  flex: 0 0 48px; /* 关键句 */
  /* flex: 0 0 auto;   !! 如果需要按内容撑开，也可以设置成 auto */
}

.wrap {
  flex: 1;
  overflow: auto;
}

.wrap span {
  display: inline-block;
  height: 500px;
  background: pink;
}