Flexbugs: IE11 중첩된 플렉스 요소의 너비를 무시합니다.

에 만든 2015년 11월 28일 · 3코멘트 · 출처: philipwalton/flexbugs

나는 이것에 대해 많은 반복을 시도했습니다... ff/chrome/safari에는 문제가 없지만 IE11에서는 'Element' 개체 그룹이 하나의 긴 줄이 됩니다.

도와줘 오비완?...

<html ><body>
<style>
.outer-rowwrap{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:1200px;height:100%;background-color:#f0f0f0;}
.inner-rowwrap{display:flex;flex-direction:row;flex-wrap:wrap;}
.nested-element{width:100px;text-align:center;border:1px solid #333;margin:5px;}
.nogrow{flex-grow:0;flex-shrink:0;flex-basis:auto;}
.grow1{flex-grow:1;flex-shrink:1;flex-basis:auto;}
</style>
<div class="outer-rowwrap">
    <div class="nogrow" style="width:200px;background-color:#ccc;">column here</div>
    <div class="grow1">
        <div class="inner-rowwrap">
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
            <div class="nogrow"><div class="nested-element">Element</div></div>
        </div>
    </div>
</div>
</body>
</html>

출처

scjnsn

👍2

가장 유용한 댓글

IE11은 컨테이너의 너비가 명확하지 않을 때 flex-basis: auto + flex-grow: 1 를 잘 처리하지 못합니다. 일관된 리포지토리 + 해결 방법을 실제로 정할 수 없었으므로 문서화하지 않았습니다.

이렇게 하면 사이트가 수정됩니다.
http://codepen.io/anon/pen/OMLRVN

또한, 앞으로는 그냥 코드보다는 데모를 올려주세요. 그렇지 않으면 함께 넣어야 하고 기분이 좋지 않았다면 아마 하지 않았을 것입니다. :)

philipwalton 에 2015년 12월 02일

👍29 ❤4 🎉4 😄4 👎2

모든 3 댓글

이렇게 하면 사이트가 수정됩니다.
http://codepen.io/anon/pen/OMLRVN

또한, 앞으로는 그냥 코드보다는 데모를 올려주세요. 그렇지 않으면 함께 넣어야 하고 기분이 좋지 않았다면 아마 하지 않았을 것입니다. :)

philipwalton 에 2015년 12월 02일

👍29 ❤4 🎉4 😄4 👎2

진심으로 감사합니다. 이것은 트릭을 수행하는 것처럼 보입니다!

scjnsn 에 2015년 12월 02일

표시

zd1010150 에 2017년 06월 30일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Flexbugs: IE11 중첩된 플렉스 요소의 너비를 무시합니다.

가장 유용한 댓글

모든 3 댓글

관련 문제