flex孩子长大了父母

Question

如何在不设置静态高度值且没有绝对位置的情况下强制将绿色框包含在红色框中？

我想缩小内容以适应父级.

允许内容(在这种情况下为视频)缩小并允许滚动条.

.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 0 auto;
  background: green;
  padding: 5px;
  margin: 5px;
}
video {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
}

<div class="my-box col">
  <div class="box-shrink">
    small sized static content
  </div>
  <div class="content-box box-grow">
    <video controls>
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    </video>
  </div>
  <div class="box-shrink">
    small sized static content
  </div>
</div>

Answer 1

解决方案#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;
}

<div class="my-box col">
  <div class="box-shrink">
    small sized static content
  </div>
  <div class="content-box box-grow">
    <video controls>
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    </video>
  </div>
  <div class="box-shrink">
    small sized static content
  </div>
</div>

解决方案#2 - 使用滚动

或者,给视频容器overflow: auto,它与上面的相同,只是保持视频全宽.您需要启用flex-shrink此功能.

.box-grow {
  flex: 1 1 auto; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  overflow: auto; /* 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 1 auto; /* formerly flex: 1 0 auto; */
  background: green;
  padding: 5px;
  margin: 5px;
  overflow: auto; /* new */
}
video {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  display: block;
}

<div class="my-box col">
  <div class="box-shrink">
    small sized static content
  </div>
  <div class="content-box box-grow">
    <video controls>
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    </video>
  </div>
  <div class="box-shrink">
    small sized static content
  </div>
</div>

这两种解决方案都在这里详细解释:

• 为什么flex项目不会缩小内容大小？