CSS：如何使容器的宽度随动态大小的子元素而缩放？

Question

我正在尝试创建一个页面，其中包含多个自适应容器，这些容器将包含几个静态大小的元素以及一个可选的具有动态宽度和高度的元素。

CSS中的缩放有点粗糙，因为我从较大的样式表中删除了它，但我希望它能显示出我的意图。

所以，我无法让它起作用的是：我非常希望动态容器可以采用其中的动态元素的宽度。

容器应该是动态元素的宽度，容器内的静态大小元素应在容器的宽度内排序，根据需要扩展高度。

我还应指出，我希望使用纯CSS解决方案。在此部署时，我没有这个选项。

---

编辑：我似乎引起了一些混乱，因此我将澄清。 静态容器正是我想要的。它正确地包裹着一切，一切都很好。我有问题的是包含动态（蓝色）元素的容器。我希望蓝色项目的容器采用蓝色项目的宽度。如果需要，红色项目应该包裹并扩展动态容器的高度。

我无法更改HTML布局。如有需要，我可以向HTML添加额外的类。

我使用更新的fiddle演示了我想要的结果。但我需要它是动态的。因此，我不能仅设置容器的宽度，这就是我制作这个的方式：https://jsfiddle.net/mnybon/nwa0gx1h/1/

---

我这里有一个 js-fiddle，以及用于存档的初始修订代码https://jsfiddle.net/mnybon/nwa0gx1h/

.site {
  height: 100vh;
  width: 100vw;
  background-color: rgb(40, 40, 40);
  overflow-x: hidden;
  overflow-y: auto;
}

.container {
  min-width: 30vw;
  max-width: 100%;  
  background-color: green;
  box-sizing: border-box;
  padding: 1vh 1vw;
  text-align: center;
  display: inline-block;
}

.container.fixed{
  width: 30vw;
}

.fixedsize-element {
  background-color: red;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 2px;
}

.variable-element {
  width: 44vw;
  height: 20vh;
  background-color: blue;
  margin: auto;
}

<div class="site">
  <div class="container dynamic">
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>
    <div class="variable-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

  </div>

  <div class="container fixed">
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>
  </div>
</div>

- Martin Nielsen

---

你能否在固定大小的元素周围添加一个包装器？ - fabienheureux

不是 :) 我无法更改HTML的结构，但我可以添加额外的类。我将更新问题，因为我发现总体上有点混淆。 - Martin Nielsen

你能试试这个吗？.container.dynamic{ display: table-caption; } - S B

你想要两个并排的容器吗？ - S B

我希望容器也能够自适应并填满整个屏幕。它们不必具有相同的高度或完美对齐，但需要允许任意数量的容器。 - Martin Nielsen

Answer 1

我看到您正在寻找flexible boxes css，以下是一个示例：

.container {
    display: flex;
    flex-wrap: wrap;
}

.dynamicsize-element {
    flex: 100%;
}

请看我的jsfiddle: https://jsfiddle.net/rpje8Lyb/1/

- Jared Chu

---

我觉得我的问题可能不太清楚。我尝试更新它，使其更有意义。我希望具有蓝色元素的容器的宽度与蓝色元素的宽度相同。如果需要，红色元素应该换行并延伸容器的高度。没有蓝色元素的容器应保持不变。 - Martin Nielsen

@Martin Nielsen，您能用图片解释一下您的想法吗？ - D V Yogesh

我更新了这个fiddle来模拟我想要的：容器保持蓝色元素的大小。但我需要一个动态的解决方案，因为蓝色容器的宽度可能会改变。 - Martin Nielsen

这似乎非常接近我想要的东西。然而，似乎蓝色框的大小并没有真正得到尊重。我移除了静态大小并尝试添加一些短段落，但蓝色框比其内部内容更宽。有什么解决方法吗？ - Martin Nielsen

好的，现在是时候执行一个小技巧了。你需要在 dynamicsize-element 元素里面放置一个 div。我已经更新了我的 fiddle。https://jsfiddle.net/rpje8Lyb/4/ - Jared Chu

也许它仍然不符合要求 - Jared Chu

Answer 2

如果您想要两个垂直对齐的容器，并且它应占用可变大小的子元素宽度，请尝试以下方法：

display:table-caption ->这些元素的行为类似于HTML元素，但它会导致垂直布局。

添加以下CSS：

.container.dynamic{ display: table-caption; } 

Fiddle Link

- S B