弹性孩子从父母那里长大

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>

原文由 Exlord 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案#1 - 没有滚动

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

然后，因为 flex 项目不能小于其内容的大小 – 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>

此处更详细地解释了这两种解决方案：

• 为什么弹性项目不会缩小过去的内容大小？

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如您所说，允许缩小内容（在本例中为视频）并允许使用滚动条。 How about putting overflow:auto; on the .box-grow class and set flex-shrink: 1; like, flex: 1 1 auto; Or if you set the flex: 1 1 100%; 该视频将适合 .box-grow 类 overflow:auto 将需要。

 .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;  /* Set the shrik 1 which is by default */
    background: green;
    padding: 5px;
    margin: 5px;
    overflow:auto; /* Overflow will be needed if you set flex:1 1 100%*/
}

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>

原文由 Baezid Mostafa 发布，翻译遵循 CC BY-SA 4.0 许可协议