Why does max-height work in Chrome but not in IE 11?

Question

I created the page below, and I want my green divs to expand downward without affecting the row below. To achieve this, I styled the .grid_cell div with max-height: 164px; so that anything contained within the grid_cell class would overflow downward without changing the height of grid_cell. Is there any way I can get this to work in IE 11 the way it works in Chrome? If you open this page in IE 11 you'll notice that when you hover over a div, it pushes the div below it downward, but in Chrome that does not happen. Why is that?

https://shampouya.5gbfree.com/Test_TeamSlideshow.html

 $(window).load(function() { $('#carousel').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, itemWidth: 210, itemMargin: 5, asNavFor: '#slider' }); $('#slider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, sync: "#carousel" }); }); 

 .flex-nav-prev, .flex-nav-next { display: none; } /*hide the left and right arrows*/ #BackgroundContainer { background-color: white; height: 1180px; background-size: cover; } .flexslider { margin-top: 4px; border: none !important; /*overrides the flexslider.css file style*/ } .flex-viewport { width: 820px; height: 750px; } .flex-active-slide { width: 820px; } #slider { background: none; margin-bottom: 20px; /*overrides the flexslider.css file style*/ min-height: 370px; /*no longer necessary? this reserves height for the slider and makes sure that the blurb at the bottom stays there as the page loads*/ } #carousel { height: 40px; width: 910px; margin-right: 10px; margin-bottom: 0px; background-color: transparent; } #carousel li { text-align: center; } #carousel span { font-family: comfortaa; color: #165D7A; font-size: 20px; line-height: 37px; text-align: center; } .Team_Container { margin-left: 10px; } .grid_cell { max-height: 164px; display: inline-block; position: relative; z-index: 0; margin-bottom: 17px; } .grid_cell:hover { z-index: 1; } .grid_cell div:hover { /*when the user hovers over the profile-containing div*/ height: 343px; background-color: rgba(176, 196, 222, 0.9) !important; /*purplish blue almost opaque*/ border-color: #7795BF !important; box-shadow: 0px 8px 20px 1px grey; } .grid_cell div div:hover { height: 160px; } /*when the user hovers over the picture-containing inner div*/ .profile_container { height: 163px; width: 144px; overflow: hidden; display: inline-block; vertical-align: top; background-color: rgba(207, 232, 221, 0.6); /*light green almost transparent*/ margin-right: 10px; margin-bottom: 10px; border: 2px solid #99D1E0; border-radius: 5px; text-align: -webkit-center; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } .profile_container span { display: block; width: 123px; margin-bottom: 5px; text-align: center; font-family: 'Comfortaa' !important; font-weight: bold; margin-right: auto; margin-left: auto; font-size: 11px; } .profile_container .employee_name { line-height: 18px; color: #395880; font-size: 14px !important; word-spacing: 120px; width: 130px; } .profile_container .job_title { line-height: 17px; } .pic_container { height: 130px; width: 124px; border-radius: 150px; position: relative; margin-left: auto; margin-right: auto; margin-bottom: 16px; overflow: hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } .profile_pic { height: 160px; } .department_description_container { width: 780px; min-height: 90px; vertical-align: middle; border-radius: 10px; background: linear-gradient(#DAE0E3, #C1D3DB); border: solid 2px #7F9AAD; padding: 10px; z-index: 0; } .department_description { font-family: comfortaa; color: #304F5E; font-size: 16px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://shampouya.5gbfree.com/jquery1.9.0.min.js"></script> <link rel="stylesheet" href="https://shampouya.5gbfree.com/ProductionPayrollHomeFlexslider.css" type="text/css" media="screen" /> <script defer src="https://shampouya.5gbfree.com/flexslider.js"></script> <script defer src="https://shampouya.5gbfree.com/carousel.js"></script> <!--referred to as modernizr.js in the flexslider package--> <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'> <div id="BackgroundContainer"> <br> <div id="carousel" class="flexslider"> <ul class="slides"> <li><a href="#"><span>Department1</span></a></li> <li><a href="#"><span>Department2</span></a></li> </ul> </div> <div id="slider" class="flexslider"> <ul class="slides"> <li> <div class="Team_Container"> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person1 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person2 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person3 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person4 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person5 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person6 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person7 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person8 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person9 LastName</span> <br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person10 LastName</span> <br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person11 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person12 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person13 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="department_description_container"> <span class="department_description">Department 1 does X, Y, and Z.</span> </div> </div> </li> <li> <div class="Team_Container"> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person1 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person2 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person3 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person4 LastName</span> <br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person5 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person6 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person7 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person8 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person9 LastName</span> <br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="grid_cell"> <div class="profile_container"> <div class="pic_container"></div> <span class="employee_name">Person10 LastName</span><br> <span class="job_title">Job Position</span> <span>Department</span> </div> </div> <div class="department_description_container"> <span class="department_description">Department 2 does U, V, and W.</span> </div> </div> </li> </ul> </div> </div> 

Answer 1

Even in IE 11, max- CSS is applied correctly.

But IE11 regards sibling elements have the same z-index, so they are not stackable in view.

If you want to show that page properly in IE, edit CSS as following:

.grid_cell {
  width: 144px;
  height: 165px;
}

.profile_container {
  position: absolute;
}