Flexbox儿童溢出

Question

我的 Flex Box 的孩子自己也有孩子，其中一个孩子（<img> 我使用object-fit:cover 来确保所有图像图块的高度/宽度都相同）。

问题是第二个孩子（<h4> 标签）没有包含在 Flex Box 中并且似乎溢出了。

到目前为止，我的努力已使<h4> 标签适合，但object-fit: cover 停止工作。

这可能吗？

#content {
  margin-left: 18%;
  margin-right: 18%;
  /*border: 1px solid black;*/
}

h1.page-title {
  margin-top: 0;
  padding: 39px 0px 39px 150px;
}

.image-pane {
  display: flex;
  background-color: rgba(0, 0, 0, 0.2);
}

.image-tile {
  margin: 1%;
  width: 48%;
}
span.image-tile>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2);
}
.image-text {
  font-family: aftaSansRegular;
  text-align: center;
}

<div id="content">
  <h1 class="page-title">
    Galleries
  </h1>

  <div class="image-pane">
    <span class="image-tile">
      <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/>
      <h4 class="image-text">
        Sports
      </h4>
    </span>

    <span class="image-tile">
      <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/>
      <h4 class="image-text">
        Models
      </h4>
    </span>
  </div>
</div>

在回复时，您能否解释一下为什么会出现这种情况，以便我理解而不是纠正它：'P

Answer 1

当你告诉一个元素是height: 100% 时，它占据了容器的整个高度。结果，没有给兄弟姐妹留下空间。这就是h4 在容器外渲染的原因。

一个简单的解决方法是让弹性容器 (.image-tile) 的子容器也成为弹性容器。

然后子项（图像和标题）成为弹性项目。使用flex-direction: column，它们垂直堆叠。

因为弹性项目的初始设置是flex-shrink: 1 和flex-wrap: nowrap，所以允许缩小带有height: 100% 的图像以使所有项目都适合容器。

然后您需要覆盖 flex 最小高度默认值 (min-height: auto)，以便图像和标题都适合容器内。更多细节在这里：

• Why doesn't flex item shrink past content size?

另外，作为旁注，如果您要在 flex 容器内使用百分比边距（或填充），请考虑以下几点：

• Why doesn't percentage padding / margin work on flex items in Firefox?

#content {
  margin-left: 18%;
  margin-right: 18%;
}

h1.page-title {
  margin-top: 0;
  padding: 39px 0px 39px 150px;
}

.image-pane {
  display: flex;
  background-color: rgba(0, 0, 0, 0.2);
}

.image-tile {
  display: flex;           /* new */
  flex-direction: column;  /* new */
  margin: 1%;
  width: 48%;
}

span.image-tile > img {
  min-height: 0;           /* new */
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2);
}

.image-text {
  font-family: aftaSansRegular;
  text-align: center;
}

<div id="content">
  <h1 class="page-title">
    Galleries
  </h1>

  <div class="image-pane">
    <span class="image-tile">
      <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/>
      <h4 class="image-text">
        Sports
      </h4>
    </span>

    <span class="image-tile">
      <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/>
      <h4 class="image-text">
        Models
      </h4>
    </span>
  </div>
</div>

Answer 2

图像高度 100% 正在产生问题，因为由于父 flex 属性，图像本身占用了 100% 的高度，因为 flex 使孩子的高度为 100%。这就是标题远离父 div 的原因。

因此，如果您想让它变得完美，请根据您的设计在图像中添加一些像素高度，例如 300px 或任何值。

#content {
  margin-left: 18%;
  margin-right: 18%;
  /*border: 1px solid black;*/
}

h1.page-title {
  margin-top: 0;
  padding: 39px 0px 39px 150px;
}

.image-pane {
  display: flex;
  background-color: rgba(0, 0, 0, 0.2);
}

.image-tile {
  margin: 1%;
  width: 48%;
}
span.image-tile>img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2);
}
.image-text {
  font-family: aftaSansRegular;
  text-align: center;
}

<div id="content">
  <h1 class="page-title">
    Galleries
  </h1>

  <div class="image-pane">
    <span class="image-tile">
      <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/>
      <h4 class="image-text">
        Sports
      </h4>
    </span>

    <span class="image-tile">
      <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/>
      <h4 class="image-text">
        Models
      </h4>
    </span>
  </div>
</div>