flex孩子长大了父母

解决方案#1 - 没有滚动

而不是flex: 1 0 auto在视频容器上,只需使用flex: 1.这会根据可用空间而不是内容的固有高度来调整项目的大小.

然后,因为弹性项目不能小于其内容的大小 - min-height: auto是默认值 - 添加min-height: 0以允许项目缩小以适合容器内部.

.box-grow {
  flex: 1; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  min-height: 0; /* new */
}

.my-box {
  height: 300px;
  width: 600px;
  background: red;
  padding: 5px;
}
.content-box {
  background: blue;
}
.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.box-shrink {
  flex: 0 1 auto;
  background: green;
  padding: 5px;
  margin: 5px;
}
.box-grow {
  flex: 1; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  min-height: 0; /* new */
}
video {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
}

  

    small sized static content
  
  

    
  
  

    small sized static content