While everything is running smoothly on Chrome and Firefox, it seems that I have encountered a problem with IE (IE11).
In my responsive layout, I am aiming for the menu to be horizontal in PC mode and vertical in tablet/mobile mode. It appears to be working as expected, but in IE, the menu items are collapsing to zero height when inspected with the developer tool. I am unable to pinpoint the underlying cause of this issue.
Does anyone have any insights or suggestions on how to resolve this?
I have created a codepen example for reference: http://codepen.io/Reblutus/pen/qjacv
Here is the code snippet:
<style>
header { background: cyan;}
nav { background: bisque;}
.main-a { background: tomato;}
.main-b { background: lightblue;}
footer { background: lightpink;}
.headerContainer nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
flex-direction: column;
}
.headerContainer nav > a {
padding: 5px 10px;
text-align: center;
background: #fcd113;
border: #6eac2c solid 1px;
border-width: 0 0 1px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media all and (min-width: 600px) {
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-direction: row;
}
.wrapper > .headerContainer {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.wrapper > .mainContainer {
-webkit-box-flex: 2;
-moz-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
.mainContainer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-direction: row;
}
.mainContainer .main-a {
-webkit-box-flex: 2;
-moz-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.mainContainer .main-b {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
@media all and (min-width: 800px) {
.wrapper {
display: block;
}
.headerContainer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-direction: row;
}
.headerContainer header {
-webkit-box-flex: 1 200px;
-moz-box-flex: 1 200px;
-webkit-flex: 1 200px;
-ms-flex: 1 200px;
flex: 1 200px;
}
.headerContainer nav {
-webkit-box-flex: 1 100%;
-moz-box-flex: 1 100%;
-webkit-flex: 1 100%;
-ms-flex: 1 100%;
flex: 1 100%;
-webkit-flex-flow: row nowrap;
flex-direction: row;
}
}
</style>
<div class="wrapper">
<div class="headerContainer">
<header>Logo <i class="fa fa-camera-retro"></i> </header>
<nav>
<a href="javascript:;">Home</a>
<a href="javascript:;">About Us</a>
<a href="javascript:;">Our Properties</a>
<a href="javascript:;">Clients & Partners</a>
</nav>
</div>
<div class="mainContainer">
<div class="main main-a">Main content A</div>
<div class="main main-b">Main content B</div> </div>
</div>
<footer>footer</footer>