固定寬度的非包裝CSS Flex

Question

我正在構建一個Carousel類型的組件，但在上手時有些困難恰到好處。

我的基本方法是一個包含大量其他div（項目）的div（包裝器）。我想在任何時候在轉盤上顯示4個項目。這些項目有不同的內容高度，但項目的高度應該相等（達到最大要求）。

我無法解決我需要使CSS正常工作的CSS組合。

使用this setup（HTML + CSS在文章底部），將忽略每個item-container上的width: 25%;。

如果我添加一個固定的.item，那麼25％會踢，但項目寬度是未知的 - 這取決於瀏覽器的大小。將它設置爲1000px意味着你會丟失該內容。設置爲〜210px的作品，但是當你開始縮小瀏覽器時，你會失去內容。在大型瀏覽器上，您的間距過大。奇怪的是，如果我將flex-wrap: wrap添加到CSS，那麼25％的寬度正確應用 - 但我不能這樣做，因爲那樣它就不是輪播！ Example

的方案是簡單： 與overflow: auto在一個div項，它們是相等的高度應顯示，與孩子的4格在任一個時刻在屏幕上的一個未知量。

<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>