Flexbox 항목이 열 모드로 래핑될 때 컨테이너 너비가 늘어나지 않습니다.

Question

저는 다음과 같이 작동하는 중첩 Flexbox 레이아웃을 개발 중입니다.

가장 바깥쪽 수준(ul#main)은 항목이 더 추가되면 오른쪽으로 확장되어야 하는 가로 목록입니다. 너무 커지면 가로 스크롤 막대가 있어야 합니다.

으아악

이 목록의 모든 항목(ul#main > li) 都有一个标头 (ul#main > li > h2) 和一个内部列表 (ul#main > li > ul.tasks). 이 내부 목록은 수직이며 필요할 때 열로 래핑되어야 합니다. 더 많은 열로 래핑되면 더 많은 항목을 위한 공간을 확보하기 위해 너비가 증가해야 합니다. 이러한 너비 증가는 외부 목록의 포함 항목에도 적용되어야 합니다.

으아악

제 문제는 창 높이가 너무 작으면 내부 목록이 줄바꿈되지 않는다는 것입니다. CSS-Tricks의 지침을 엄격하게 따르려고 모든 Flex 속성을 조작하려고 많이 시도했지만 성공하지 못했습니다.

이 JSFiddle은 지금까지의 내용을 보여줍니다.

예상 결과 (내가 원하는 것):

실제 결과 (내가 얻은 것):

이전 결과 (2015년에 얻은 결과):

업데이트

몇몇 조사 끝에 이것이 더 큰 문제로 보이기 시작했습니다. 모든 주요 브라우저는 동일한 방식으로 작동합니다. 이는 내 중첩된 Flexbox 디자인과 아무 관련이 없습니다. 더 단순한 Flexbox 열 레이아웃이라도 항목이 줄바꿈될 때 목록의 너비가 늘어나지 않습니다.

또 다른 JSFiddle이 문제를 명확하게 보여줍니다. 현재 버전의 Chrome, Firefox 및 IE11에서는 모든 항목이 row 模式下列表的高度会增加，但在 column 模式下其宽度不会增加。另外，当更改 column 模式的高度时，根本不会立即回流元素，但在 row 모드에서 올바르게 래핑됩니다.

그러나 공식 사양은 (자세한 내용은 예 5 참조) 내가 하고 싶은 일이 가능해야 함을 나타내는 것 같습니다.

이 문제에 대한 해결책을 찾을 수 있는 사람이 있나요?

업데이트 2

JavaScript를 사용하여 크기 조정 이벤트 중에 다양한 요소의 높이와 너비를 업데이트하려고 시도한 끝에 이 방법으로 해결하려는 시도가 너무 복잡하고 번거롭다는 결론에 도달했습니다. 또한 JavaScript를 추가하면 최대한 깔끔하게 유지해야 하는 Flexbox 모델이 확실히 손상됩니다.

이제 overflow-y: auto 而不是 flex-wrap:wrapper로 돌아가서 필요한 경우 내부 컨테이너가 수직으로 스크롤되도록 합니다. 예쁘지는 않지만 적어도 유용성을 크게 손상시키지 않는 접근 방식입니다.

Answer 1

파티에 늦었지만 몇 년이 지난 후에도 여전히 이 문제가 발생합니다. 마침내 그리드를 사용하여 솔루션을 찾았습니다. 용기에 담아서 사용할 수 있습니다

으아아아

Flexbox 문제와 메시 수정 간 전환을 위한 CodePen의 예가 있습니다: https://codepen .io/MandeeD/pen/JVLdLd

Answer 2

질문

이것은 플렉스 레이아웃의 근본적인 결함처럼 보입니다.

열 지향 플렉스 컨테이너는 추가 열을 수용하기 위해 확장되지 않습니다. (flex-direction: row에서는 문제가 되지 않습니다.)

이 질문은 여러 번 요청되었으며(아래 목록 참조) CSS에는 명확한 답변이 없습니다.

이 문제는 모든 주요 브라우저에서 발생하기 때문에 버그라고 단정하기는 어렵습니다. 하지만 다음과 같은 질문이 제기됩니다.

그 중 적어도 한 명은 정답을 맞힐 것이라고 생각할 것입니다. 나는 그 이유에 대해서만 추측할 수 있다. 아마도 이것은 기술적으로 어려운 구현이었기 때문에 이번 반복에서는 보류되었을 것입니다.

업데이트: 이 문제는 Edge v16에서 해결된 것 같습니다.

---

문제 설명

OP는 문제를 설명하기 위해 유용한 데모를 만들었습니다. 여기에 복사했습니다: http://jsfiddle.net/nwccdwLw/1/ p>

---

해결 방법 옵션

Stack Overflow 커뮤니티의 Hacky 솔루션:

• "CSS만으로는 이 문제를 해결할 수 없는 것 같으니 JQuery 솔루션을 사용하는 것이 좋습니다."

• "이상하게도 대부분의 브라우저는 열 플렉스 컨테이너를 올바르게 구현하지 않지만 쓰기 모드에 대한 지원은 꽤 좋습니다. 따라서 세로 쓰기 모드에서 행 플렉스 컨테이너를 사용할 수 있습니다."

추가 분석

---

• Chromium 버그 보고서

• Mark Emery의 답변

---

같은 문제를 설명하는 다른 게시물

• 플렉스 박스 컨테이너 너비는 늘어나지 않습니다
• 디스플레이를 만드는 방법: 플렉스 컨테이너가 포장된 콘텐츠로 수평으로 확장됩니까?
• Flex-flow: 열 래핑. 컨테이너의 너비를 콘텐츠와 동일하게 설정하는 방법은 무엇입니까?
• Flexbox Chrome에서 Flex-flow 열 줄바꿈 오류가 발생했나요?
• "flex-flow: 컬럼 랩"을 어떻게 사용하나요?
• 콘텐츠가 열로 래핑되면 Flex 컨테이너가 확장되지 않습니다
• flex-flow: 열 래핑으로 인해 Flexbox에서 상위 컨테이너가 오버플로됩니다
• Html Flexbox 컨테이너는 래핑된 하위 항목에서 확장되지 않습니다.
• Flexbox 컨테이너와 넘쳐나는 Flex 아이들?
• 포장된 품목에 맞게 늘어나는 Flexbox 컨테이너를 만드는 방법은 무엇입니까?
• 여러 열이 있는 경우 Flex 컨테이너는 하나의 열을 계산합니다
• Flex를 사용하여 컨테이너를 전체 너비로 만듭니다.
• Flexbox 컨테이너의 크기를 조정할 수 있나요?
• Flex-Wrap 내장 Flex-Grow
• Flexbox가 점진적으로 포함됩니다
• Flexbox 요소를 콘텐츠로 확장하시겠습니까?
• Flexbox 열은 콘텐츠에 맞게 늘어납니다
• https://stackoverflow.com/q/48406237/3597276
• flex-flow: 열 줄 바꿈은 상위 요소의 너비를 늘리지 않습니다
• 내
  가 모든
  • 을 포괄하도록 너비가 확장되지 않는 이유는 무엇인가요?
• https://stackoverflow.com/q/55709208/3597276
• Flexbox 줄 바꿈은 상위 항목의 너비를 늘리지 않습니까?
• Absolute Flex 컨테이너는 최대 높이를 정의하는 올바른 너비로 변경되지 않았습니다.
• 부모 인라인 블록 div가 flex-wrap
을 사용하는 하위 div보다 좁습니다.