NEWER Flexbox API를 사용하는 전체 높이 앱의 Flexbox 및 수직 스크롤

NEWER Flexbox API를 사용하는 전체 높이 앱의 Flexbox 및 수직 스크롤

---

flexbox를 사용하여 전체 높이 앱을 사용하고 싶습니다. 이 링크에서 이전 flexbox (디스플레이 : 상자 및 기타 항목)를 사용하여 원하는 것을 찾았습니다. CSS3 Flexbox 전체 높이 앱 및 오버플로

이것은 이전 버전의 flexbox css 속성에 대한 올바른 솔루션입니다.

새로운 flexbox 속성을 사용하려면 동일한 링크에서 두 번째 솔루션을 사용하지만 높이가 0px 인 컨테이너를 사용하여 flexbox 를 "해킹"합니다 . 세로 스크롤을 보여줍니다.

다른 문제가 발생하고 해결책 이라기 보다 해결 방법이기 때문에 많이 좋아하지 않습니다 .

기본 예제로 jsfiddle을 준비했습니다. http://jsfiddle.net/ch7n6/

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

이것은 "전체 높이 html 웹"이고 바닥 글은 콘텐츠 요소의 flexbox로 인해 맨 아래에 있습니다. 다른 높이를 시뮬레이션하기 위해 CSS 코드와 결과 사이에 막대를 이동하는 것이 좋습니다.

---

나에게 답을 준 https://stackoverflow.com/users/1652962/cimmanon 에게 감사드립니다 .

해결책은 세로 스크롤 가능 요소에 높이를 설정하는 것입니다. 예를 들면 :

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

최소 높이 를 원하지 않는 한 flexbox가 다시 계산하기 때문에 요소 는 높이 를 가질 것입니다. 그래서 height : 100px; : 정확히 동일하다 최소 높이 100 픽셀;

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

따라서 수직 스크롤에서 최소 높이 를 원하는 경우 최상의 솔루션 :

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

기사를 볼 수있는 공간이 충분하지 않은 경우 전체 세로 스크롤을 원하는 경우 :

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

최종 코드 : http://jsfiddle.net/ch7n6/867/

---

여기에 Flexbox 사양 편집기가 있습니다.

이것은 flexbox의 권장 사용이지만 최상의 동작을 위해 조정해야 할 몇 가지 사항이 있습니다.

• 접두사를 사용하지 마십시오. 접두사가없는 flexbox는 대부분의 브라우저에서 잘 지원됩니다. 항상 접두사가없는 것으로 시작하고이를 지원하기 위해 필요한 경우에만 접두사를 추가하십시오.

• 머리글과 바닥 글은 유연하지 않기 때문에 둘 다 flex: none;설정되어 있어야 합니다. 지금은 겹치는 효과로 인해 유사한 동작이 발생하지만 나중에 실수로 혼동하지 않는 한 그것에 의존해서는 안됩니다. (기본값은 flex:0 1 auto이므로 자동 높이에서 시작하여 축소 할 수는 있지만 커질 수는 없지만 overflow:visible, 기본적으로 도 min-height:auto축소되지 않도록 기본값 을 트리거 합니다.에를 설정 한 경우 변경 overflow동작은 min-height:auto(최소 콘텐츠가 아닌 0으로 전환) 그리고 그들은 갑자기 매우 키가 큰 <article>요소에 의해 찌그러 질 것 입니다.)

• 당신은 <article> flex너무 단순화 할 수 있습니다 -그냥 설정 flex: 1;하고 당신은 갈 수 있습니다. 좀 더 복잡한 작업을 수행 할 합당한 이유가없는 한 https://drafts.csswg.org/css-flexbox/#flex-common 의 공통 값을 고수하십시오. 대부분의 동작을 읽고 다루기가 더 쉽습니다. 호출하고 싶을 것입니다.

---

현재 사양은 다음과 flex: 1 1 auto같이 말합니다 .

width/ height속성을 기준으로 항목의 크기를 조정 하지만 완전히 유연하게 만들어 주 축을 따라 여유 공간을 흡수합니다. 모든 항목이 하나 인 경우 flex: auto, flex: initial또는 flex: none, 크기 된 항목 후 긍정적 빈 공간으로 항목에 균등하게 분배됩니다 flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

It sounds to me like if you say an element is 100px tall, it is treated more like a "suggested" size, not an absolute. Because it is allowed to shrink and grow, it takes up as much space as its allowed to. That's why adding this line to your "main" element works: height: 0 (or any other smallish number).

참고URL : https://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api