固定宽度的非包装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>