Flexbox children 的 children 溢出

Question

我的 Flex Box 的 children 本身有 Children，对于其中一个 children（<img> 我用 object-fit:cover确保所有图像块都是相同的 height/width).

问题是第二个 child（<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

图像高度 100% 造成了问题，因为 100% 的高度被图像本身占据，这是由于父级 flex 属性因为 flex 使子级的高度为 100%。这就是 title 离开 parent 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>

Answer 2

当你告诉一个元素是height: 100%时，它占据了容器的整个高度。如此一来，兄弟姐妹就没有space了。这就是 h4 在容器外呈现的原因。

一个简单的修复方法是使弹性容器 (.image-tile) 的 child 也成为弹性容器。

然后 children（图像和标题）成为 flex 项目。 flex-direction: column 它们垂直堆叠。

因为 flex 项目的初始设置是 flex-shrink: 1 and 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>

Flexbox children 的 children 溢出

Flexbox children's children overflowing

html

css

overflow

flexbox