固定宽度的非包装CSS Flex

我正在构建一个旋转木马类型的组件，但要让它正常工作有些困难

我的基本方法是一个包含许多其他div（项）的div（包装器）。我想在旋转木马上同时显示4个项目。项目具有不同的内容高度，但项目的高度应等于（所需的最大值）

我无法计算CSS组合，我需要让它正确工作

（在帖子底部是HTML+CSS），宽度为25%项目容器上的code>

如果我在

.item

中添加一个fixed with，那么25%将生效，但项目宽度未知——它取决于浏览器的大小。将其设置为1000px意味着您将丢失该项目的内容。将其设置为~210px可以工作，但当您开始缩小浏览器时，您会丢失内容。在大型浏览器上，间距过大

奇怪的是，如果我将

flex-wrap:wrap

添加到CSS中，那么25%的宽度就被正确地应用了——但我不能这样做，因为这样它就不是旋转木马了

情况很简单： 在具有

溢出：auto

的div中，应显示高度相等的未知数量的项目，同时屏幕上同时显示4个子div。

我的HTML的结构如下：

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

---

注意，这是我的。在我的真实组件上，我有左右滚动的按钮，内容要复杂得多，诸如此类。

您所需要的只是将

flex:0 0 auto

添加到

.item container

元素中

*{
框大小：边框框；
}
#容器{
宽度：100%；
背景：#0f0；
溢出：自动；
}
#包装纸{
显示器：flex；
}
.物品容器{
边框：1px实心#f00；
flex:0自动；
宽度：25%；
}

旋转项目#1和一些相当长的文本。


转盘项目#2。


旋转木马项目#3。


传送带项目#4。


转盘项目#5。


传送带项目#6。


传送带项目#7。

您只需将

flex:0 0 auto

添加到

.item container

元素中即可

*{
框大小：边框框；
}
#容器{
宽度：100%；
背景：#0f0；
溢出：自动；
}
#包装纸{
显示器：flex；
}
.物品容器{
边框：1px实心#f00；
flex:0自动；
宽度：25%；
}

旋转项目#1和一些相当长的文本。


转盘项目#2。


旋转木马项目#3。


传送带项目#4。


转盘项目#5。


传送带项目#6。


传送带项目#7。

我已经为此奋斗了几个小时，谢谢。我缺少的特定属性是

flex-shrink:0

。其他（

flex-basis:auto；flex-grow:0；

）是默认值。我已经为此奋斗了几个小时，谢谢。我缺少的特定属性是

flex-shrink:0

。其他（

flex-basis:auto；flex-grow:0；

）是默认值。@Pete是的，我使用JS来处理滚动按钮——旋转木马也可以在非JS浏览器上工作，方法是链接到当前页面并向查询字符串添加索引——这将在服务器端进行分析，并根据需要删除和更改内容：）@Pete-Yes，我使用JS来处理滚动按钮——旋转木马也可以在非JS浏览器上工作，方法是链接到当前页面并向查询字符串添加索引——这是服务器端分析的，可以根据需要对内容进行删减和更改：）

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

#wrapper {
  display: flex;
}

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