Problem
Left and right boxes heights’ should be equal.
Screenshot 2016-09-03 20.54.08

Solution

Screenshot 2016-09-03 20.54.37

.parent-of-left-right-containers {
display: flex;
flex-direction: column;
}

.right-container {
flex: 1;
}

Thanks to CSS Tricks!

Update (Sep 5, 2016)
IE hack was needed. Someone mentioned on StackOverflow that flex: 1 and flex: 1 1 auto are NOT the same on IE. I forgot save the link.

/* IE hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.right-container {
-webkit-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s