고정 폭을 가진 비 - 랩핑 CSS 플렉스

Question

저는 회전식 타입의 구성 요소를 만들고 있습니다 만, 작동하려면 약간의 어려움을 겪고 있습니다 바로입니다.

내 기본 접근 방식은 다른 div (항목)가 많은 div (래퍼)입니다. 한 번에 회전 목마에 4 개의 항목을 표시하고 싶습니다. 항목의 내용 높이는 다양하지만 항목 높이는 같아야합니다 (필요한 최대 크기까지).

제대로 작동하려면 필요한 CSS 조합을 해결할 수 없습니다.

this setup (게시물 하단의 HTML + CSS) 각 item-container의 width: 25%;은 무시됩니다.

.item에 고정 값을 추가하면 25 %가 입력되지만 항목 너비는 알 수 없습니다. 브라우저 크기에 따라 다릅니다. 1000px로 설정하면 항목의 콘텐츠가 손실됩니다. ~ 210px로 설정하면 브라우저가 축소되기 시작하면 콘텐츠가 손실됩니다. 대형 브라우저에서는 공간이 너무 넓습니다.

이상하게도 CSS에 flex-wrap: wrap을 추가하면 25 % 너비가 올바르게 적용됩니다.하지만 그럴 수는 없습니다. 회전식 슬라이드가 아니기 때문입니다. Example

시나리오는 간단하다 : 아이들 (4) 한 번에 화면에 div를 함께 표시해야한다 동일한 높이입니다 overflow: auto와 사업부 항목의 알 수없는 양입니다.

이

<div id="container"> 
    <div id="wrapper"> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #1 with some quite long text. 
     </p> 
     </div> 
    </div> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #2. 
     </p> 
     </div> 
    </div> 
    <div class="item-container"> 
     <div class="item"> 
     <p> 
      Carousel Item #3. 
     </p> 
     </div> 
    </div> 
    ... 
    </div> 
</div> 

내 CSS :

#container { 
    width: 100%; 
    background: #0f0; 
    overflow: auto; 
} 

#wrapper { 
    display: flex; 
} 

.item-container { 
    border: 1px solid #f00; 
    width: 25%; 
} 

참고이 내 MCVE입니다 다음과 같이

내 HTML이 구성되어있다. 실제 구성 요소에는 왼쪽 및 오른쪽으로 스크롤 할 수있는 버튼이 있습니다. 내용이 훨씬 복잡하고 그와 같은 것입니다.

Answer 1

flex: 0 0 auto ~ .item-container 요소를 추가하면됩니다.

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    background: #0f0; 
 
    overflow: auto; 
 
} 
 

 
#wrapper { 
 
    display: flex; 
 
} 
 

 
.item-container { 
 
    border: 1px solid #f00; 
 
    flex: 0 0 auto; 
 
    width: 25%; 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #1 with some quite long text. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #2. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #3. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #4. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #5. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #6. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div class="item-container"> 
 
     <div class="item"> 
 
     <p> 
 
      Carousel Item #7. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>