1. IE11 > 말줄임 텍스트가 보이지 않는 이슈
1.1 이슈 내용
flex 구조 내에서 특정 상황에서 말줄임 텍스트가 노출되지 않는 이슈 발생
- 원인 : 부모와 자식 요소에서 flex 구조를 사용했는데 높이를 잡지 못하는 경우에 말줄임을 하게 되면
overflow:hidden속성에 의해서 텍스트가 노출되지 않게 됩니다.
1.2 테스트
아래 사진처럼 크롬에서는 정상 노출되지만 IE에서는 말줄임 텍스트가 노출되지 않는 상황을 재현 해보았습니다.
- 크롬(정상)
- IE(이슈)
IE에서도 높이를 잘 잡고 말줄임이 잘 되던 영역에 flex: 1 을 추가하였더니 아래 사진처럼 사라졌습니다.
다시 flex: 1 을 지우고, 이번에는 노출이 안되던 요소의 flex: 1 을 제거 해보았습니다. 그 결과 정상적으로 노출되는 것을 확인할 수 있습니다. 부모의 높이가 정해지지 않은 상황에서 자식 요소에 flex: 1 속성을 사용해 높이값을 잡을 수 없게 되었을 때 요소가 사라지는 것을 알 수 있습니다.
그런데 flex 속성만 있을 뿐 높이를 잡아준 적은 없는데 왜 이런 경우에는 정상적으로 동작할까요?
그 이유는 display: flex 의 성질 때문인 것 같습니다. flex-direction: row 일 때는 기본적으로 아이템들을 수평으로 나열하고 높이는 최대로 채우는 성질을 가지고 있습니다. 그래서 따로 높이를 잡아주지 않더라도 영역을 차지하고 말줄임 텍스트가 노출될 수 있는 것입니다.
그렇다면 flex-direction:column 일 경우에는 아이템을 수직으로 나열하고 높이 값은 따로 변하지 않습니다. 그렇기 때문에 아
래 사진처럼 column 을 추가해도 말줄임 텍스트가 사라지는 것을 확인할 수 있습니다.
정상적으로 노출되는 요소에는 이미 height: 100px 이라는 높이를 정해놓았기 때문에 column 을 추가했을 경우에도 영향을 받지 않는 것을 확인할 수 있었습니다.
1.3 정리
- 높이가 없는 상태에서
flex: 1를 사용하거나flex-direction: column을 사용해서 높이 값을 제대로 인식하지 못하는 경우에서 발생하고 있기 때문에 높이를 해결해줘야 합니다. div태그로 한번 감싸기- 고정 높이값 사용하기
- FullPage 를 사용해야한다면 html 부터 height 상속 받아서 사용하기
2. IE11 > min-height 높이 못잡는 이슈
2.1 이슈 내용
ie에서 flex: 1 속성 사용시 부모의 높이가 min-height 를 제대로 인식하지 못해서 발생
- 자료
2.2 테스트
min-height로 발생하는 이슈를 재현해보고 해결해보도록 하겠습니다.
.wrapper {
display: flex;
flex-direction: column;
min-height: 500px;
font-size: 50px;
}
.header,
.footer {
height: 100px;
background-color: lightblue;
}
.content {
flex: 1;
} <body class="wrapper">
<header class="header">Header</header>
<main class="content">
Content <br />
Content <br />
Content <br />
</main>
<footer class="footer">footer</footer>
</body>위와 같이 최소 500px을 가지는 .wrapper 요소에 header,footer 는 100px 씩 높이를 차지하고 content 만 가득 차도록 하는 코드를 작성했습니다. 이렇게 작성하게 크롬과 IE에서 아래와 같은 결과를 얻을 수 있습니다.
- 크롬
- IE11
보시는 것처럼 크롬에서는 min-height 와 함께 사용한 flex: 1 속성이 정상적으로 동작하고 있지만, IE11 에서는 contetnt 영역을 제대로 잡지 못하는 것을 확인하실 수 있습니다.
콘텐츠 내용이 길어지더라도 크롬은 정상적으로 동작하고 있고, IE11 는 영역을 제대로 잡지 못하고 있습니다.
- 크롬
- IE
2.2 해결
위 이슈를 해결하기 위해서 아래와 같이 스타일을 수정해줍니다.
.wrapper {
display: flex;
flex-direction: column;
height: 500px; /* min-height 에서 height */
font-size: 50px;
}
.header,
.footer {
flex-shrink: 0; /* 추가 */
height: 100px;
background-color: lightblue;
}
.content {
flex: 1 0 auto; /* 1 에서 1 0 auto */
}min-height대신height사용content,header,footer에flex-shrink : 0속성 추가, 즉 영역이 줄어들지 않도록 해줌.
수정을 하면 IE11 에서도 컨텐츠 내용이 적을때나 많을때나 정상적으로 영역을 잡는 것을 확인하실 수 있습니다.
- IE11 (컨텐츠 적을 때)
- IE11 (컨텐츠 많을 때)
위 케이스들을 기반으로 Flex를 사용한다면 주의해야하는 부분
- 전체적인 이슈가
flex-direction: column으로 수직배치를 할 때 높이를 제대로 잡지 못해서 발생하고 있습니다. - 높이를 채우기 위해
flex:1을 사용한다면 크롬 외의 브라우저에서 테스트가 필요할 것 같습니다. - 무조건
flex: 1을 사용하기 보다flex-grow,flex-shrink를 상황에 맞게 사용하는 것도 좋을 것 같습니다. - 크롬 외의 브라우저에서는 height 를 정확히 명시해주지 않으면 에러가 발생할 수 있습니다.
'웹 개발 > UI' 카테고리의 다른 글
| html css로 팝업 레이어(모달) 만들기 (0) | 2021.01.12 |
|---|---|
| 퍼블리셔가 알면 유용한 웹 사이트 (feat. 크롬 확장프로그램) (0) | 2020.06.20 |
| HTML, CSS로 사이드바 만들기 (0) | 2020.06.06 |
| Flexbox로 반응형 레이아웃 만들기 (0) | 2020.06.06 |
| HTML CSS로 이미지 슬라이드, 롤링배너 , 캐러셀 만들기(owlCarousel.js) (0) | 2020.06.05 |
댓글