1

I have a responsive menu that I am working on that is using flex css to make the divs stack. I have them contained within two containers due to some javascript needed on the main div. My issue is that the main div is 95% width with absolute position, inside I have a container div with relative position that is 95% and set to display: flex, and divs within this div. (Diagram below) The problem is that in IE 11, the flex display is not working and the width is expanding beyond the container div width and not wrapping. I have included the code. Please advise as this works in all other browers, ipad, on this site, etc. The code snippet works here but not on the site.... Thank you and sorry for any confusion. 

.col_full {
 width:100%;
}

.maindiv {
    margin:4px 10px;
    position:absolute;
    display:show; /* shows on hover */
    text-align:left;
    padding:20px;
    border:1px solid #777777;
    border-top:none;
   left:0;
   right:0;
   z-index:100;
    width:95%; 
}

.containerdiv {
 position: relative;
 width:100%;
 margin:auto;
 text-align:center;
 display: flex;
  flex-wrap: wrap;
 flex: 1;
 justify-content: center;
  align-items: top;
  flex-direction: row;
 overflow: auto;
}

.divs {
 max-width:260px;
 position:relative;
 flex-grow: 1;
 padding: 15px 15px 50px 15px;
 margin:15px;
 text-align:left;
 overflow:hidden;
}
<div class="maindiv"><div class="containerdiv">
 
  <div class="col_full">
   <h2>Header Goes Here</h2>
  </div>
  
  <div class="cb"></div> 
  
  <div class="divs">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis imperdiet mauris, a faucibus nibh sollicitudin et. Maecenas ac tincidunt ligula. Praesent ornare mi consequat est fringilla, ac semper ante lacinia. Integer ultricies massa sit amet dui accumsan tincidunt. Duis eget metus vitae odio lacinia fermentum sit amet sed nibh. Phasellus volutpat nulla in ex ullamcorper congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris justo lectus, ullamcorper eget lacinia at, convallis et lorem. 
  </div>
  
  <div class="divs">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis imperdiet mauris, a faucibus nibh sollicitudin et. Maecenas ac tincidunt ligula. Praesent ornare mi consequat est fringilla, ac semper ante lacinia. Integer ultricies massa sit amet dui accumsan tincidunt. Duis eget metus vitae odio lacinia fermentum sit amet sed nibh. Phasellus volutpat nulla in ex ullamcorper congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris justo lectus, ullamcorper eget lacinia at, convallis et lorem. 
  </div>
  
  <div class="divs">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis imperdiet mauris, a faucibus nibh sollicitudin et. Maecenas ac tincidunt ligula. Praesent ornare mi consequat est fringilla, ac semper ante lacinia. Integer ultricies massa sit amet dui accumsan tincidunt. Duis eget metus vitae odio lacinia fermentum sit amet sed nibh. Phasellus volutpat nulla in ex ullamcorper congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris justo lectus, ullamcorper eget lacinia at, convallis et lorem. 
  </div>
  
  <div class="divs">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis imperdiet mauris, a faucibus nibh sollicitudin et. Maecenas ac tincidunt ligula. Praesent ornare mi consequat est fringilla, ac semper ante lacinia. Integer ultricies massa sit amet dui accumsan tincidunt. Duis eget metus vitae odio lacinia fermentum sit amet sed nibh. Phasellus volutpat nulla in ex ullamcorper congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris justo lectus, ullamcorper eget lacinia at, convallis et lorem. 
  </div>
    
  
  
  
 </div>

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Marie C.
  • 37
  • 5
  • It look the same to me in both Chrome and IE11. What do you mean is different? – Asons Jun 04 '17 at 20:35
  • https://stackoverflow.com/q/35111090/3597276 – Michael Benjamin Jun 04 '17 at 22:18
  • I tested on IE11 but didn't notice any problem? Also, `.maindiv { display: show }` should be `.maindiv { display: block }`, dont know if this is the cause of the problem you are having though. – Takebo Jun 04 '17 at 19:00
  • Thank you all. I figured it out. I had to change how the outer div displayed on hover and that resolved it. I appreciate your time. :) – Marie C. Jun 06 '17 at 15:48

1 Answers1

0

The sample code was working but not on the actual site. I had to change the display to flex on hover on the maindiv and this resolved the issue. The actual page uses a lot of CSS and js to get the page to display the way I wanted it to and I couldn't provide all of the code here. I appreciate all of the help.

Marie C.
  • 37
  • 5