Flexbox children's children overflowing

Question

The children of my Flex Box have Children themselves, for one of these children (the <img> I use the object-fit:cover to make sure all of the image tiles will be of the same height/width).

The problem is that the second child (<h4> tag) is not being contained within the Flex Box and appears to overflow.

My efforts thus far have resulted in the <h4> tag fitting but the object-fit: cover ceasing to work.

Is this possible to do?

#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>

When replying could you please provide an explanation of why it occurs this way so I can understand it rather then just correct it :'P

Answer 1

When you tell an element to be height: 100%, it occupies the full height of the container. As a result, there is no space left for siblings. That's why the h4 is being rendered outside the container.

A simple fix is to make the child of the flex container (.image-tile) also a flex container.

Then the children (the image and the heading) become flex items. With flex-direction: column they stack vertically.

Because initial settings on flex items are flex-shrink: 1 and flex-wrap: nowrap, the image with height: 100% is allowed to shrink in order for all items to fit inside the container.

You then need to override the flex minimum height default (min-height: auto) so the image and heading both fit inside the container. More details here:

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

Also, as a side note, if you're going to use percentage margins (or padding) inside a flex container, consider this:

• 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

Image height 100% is creating issue because 100% height occupied by image itself due to parent flex property as flex makes child's height 100%. That's why title goes away from parent div.

So if you want to make it perfect, add some pixels height in image like 300px or anything according to your design.

#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>