1
フレックスCSSを使用してdivsスタックを作成しているレスポンシブメニューがあります。私は、メインのdivに必要なjavascriptのために、それらを2つのコンテナ内に格納しています。私の問題は、メインのdivは絶対位置の95％の幅で、内部には95％の相対位置を持つコンテナdivがあり、このdiv内にはflexとdivが表示されるように設定されています。 （下の図）問題は、IE 11では、フレックス表示が機能しておらず、幅がコンテナdivの幅を超えて折り返していないことです。私はコードを含んでいます。他のすべてのブラウザ、ipad、このサイトなどで動作するので、アドバイスをしてください。コードスニペットはここでは動作しますが、サイトでは動作しません....ありがとうございました。混乱して申し訳ありません。IE 11ではFlex CSSが動作しません
.col_full {
\t 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;
\t left:0;
\t right:0;
\t z-index:100;
width:95%; \t
}
.containerdiv {
\t position: relative;
\t width:100%;
\t margin:auto;
\t text-align:center;
\t display: flex;
flex-wrap: wrap;
\t flex: 1;
\t justify-content: center;
\t align-items: top;
flex-direction: row;
\t overflow: auto;
}
.divs {
\t max-width:260px;
\t position:relative;
\t flex-grow: 1;
\t padding: 15px 15px 50px 15px;
\t margin:15px;
\t text-align:left;
\t overflow:hidden;
}<div class="maindiv"><div class="containerdiv">
\t
\t \t <div class="col_full">
\t \t \t <h2>Header Goes Here</h2>
\t \t </div>
\t \t
\t \t <div class="cb"></div>
\t \t
\t \t <div class="divs">
\t \t \t 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.
\t \t </div>
\t \t
\t \t <div class="divs">
\t \t \t 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.
\t \t </div>
\t \t
\t \t <div class="divs">
\t \t \t 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.
\t \t </div>
\t \t
\t \t <div class="divs">
\t \t \t 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.
\t \t </div>
\t \t \t \t
\t \t
\t \t
\t \t
\t </div>
ChromeとIE11では同じように見えます。あなたはどういう意味ですか？ – LGSon
https://stackoverflow.com/q/35111090/3597276 –
IE11でテストしましたが、問題はありませんでしたか？ また、 '.maindiv {display：show}'は '.maindiv {display：block}'でなければなりません。これが問題の原因であるかどうかは分かりません。 – Takebo