Question

我有一个用子元素动态填充的容器。各个子元素的width属性是从后端检索的，百分比为100％。这是因为期望的效果是，孩子们彼此之间保持大小比例。

.wrapper {
  display: flex;
  width: 100%;
}

.item {
  overflow: hidden;
  height: 20px;
}

<div class="wrapper">
  <div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>
</div>

问题在于，孩子的数量可以是任意的，他们越多，他们变得越被挤压。因此停止播放以适应内容。

因此，我希望它们具有最小宽度，并且能够水平滚动容器，同时仍保留从数据库中检索到的比例。

我尝试过：

将容器上的宽度设置为固定值，例如2000px和溢出X自动。可以在渲染页面时以某种方式计算宽度。它使孩子们很好地缩放以加起来以覆盖容器宽度的100％。问题是滚动无法正常进行，因为容器实际上是2000px宽，您必须滚动整个页面而不是容器
在孩子身上设置最小宽度会导致比例丢失

因此，我需要一个将两者结合但似乎无法解决的解决方案。我将不胜感激。

Answer 1

您可以在flex-wrap: wrap上使用.wrapper，以便当子代无法适应父代的宽度时，他们将直接转到另一行。这样，它们可以轻松地水平放置，但是可以垂直延伸。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  overflow: hidden;
  height: 20px;
}

<div class="wrapper">
  <div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>  
  <div class="item" style="width: 30%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 15%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 5%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 40%">Lorem ipsum dolor sit amet</div>
  <div class="item" style="width: 10%">Lorem ipsum dolor sit amet</div>
</div>

具有动态大小的子级的容器的CSS滚动

1 个答案: