Responsive images within nested flexboxes are spilling outside of their parents?

[benjamincharity]

I have a fairly complex flexbox layout (multiple levels deep). Everything seems to work fine until I include some responsive images within the flexboxes. I’ve noticed that the parent doesn’t expand vertically to allow for the image height.

Due to some requirements, we need to use multiple versions of the flexbox implementation e.g.:

.foo {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
}

Fiddle

(Pardon the scattered code, this is a frankensteined version pulled from a Sass/Angular project that is generated via several Sass functions)

The main layout CSS:

// main wrapper for the page
.international {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
  height: 100%;
  width: 100%;
}

// primary header container
.skin__header {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
}

// container for page headers
.headings {
  flex-grow: 1;
}

// right hand content within the header
.branding {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
  flex-shrink: 1;
}
// container around both images
.branding__images {
  order: 1;
  justify-content: flex-end;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
  align-items: center;
}
// container for logo
.branding__logo {
  order: 1;
}
// container for text
.branding__text {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
  align-items: flex-start;
}

// primary center content of page
.content {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
  flex-grow: 1;
}

// primary container for the footer
.skin__footer {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: box;
  display: flex;
}

Logically, my brain says: header and footer height is determined by their contents per the browser and then flexbox forces the center content box to fill all remaining space. So as the images within the header grow, the header height grows and the content area shrinks vertically.

Even more perplexing, the text content does expand the header height as expected.

Without the containing divs around the images, flexbox stretches the images and skews the aspect ratio. I had assumed that the containing div would be controlled via flexbox while the image (set to max-width: 100%) would scale to the allowed size within that container.

What am I missing here?

Note: I’ve seen some other simimlar questions, but none seem to be exact or offer a solution that fits. e.g. http://bnj.bz/0D3T1I3v2C0Y and http://bnj.bz/1B3n0W2H1J21

[Author]

Posts