CSS 不允许将 div 元素破坏到新行

Question

我有一个包含一些动态生成的内容的网页，在该页面上我有一个大 div（我们将其称为容器），其中包含其他 div（我们将称之为这些组），每个 div（组）包含许多输入字段。 （事先不知道有多少，但我可以将其限制为 1-10 之类的）。

我需要组中的每个输入都在同一行上，因此组中没有换行符（如果该术语在本上下文中是正确的）。一行中可以有任意多个组，但新行上的第一个输入始终需要是该组中的第一个输入。

目前我已经完成了大部分工作，除了整个换行的事情。这是当前情况的图片。

正如您所看到的，组已分解，第一行的最后 3 个输入应该已经在下一行。

有没有办法禁用 div 中所有元素的换行行为，同时保持分解多个 div 的能力？

以下是 codepen 上的示例。

这是我到目前为止的CSS：

.number-fields input {

    width: 1cm;

    text-align: center;

}

.number-fields-input {

    margin: 5px;

}

* {

    background-color: #2F363F;

}

.form-control {

    color: lightcyan;

    display: inline;

    background-color: #2F363F;

}

#number-fields {

    padding-right: 5vh;

    width: 100%;

}

.input_group {

    display: inline;

    padding-right: 5vh;

}

Answer 1

尝试在此处将 Flexbox 与 flex-wrap 结合使用：wrap 在容器上并使用 flex-wrap： nowrap 输入组。.container {    display:flex;    flex-wrap:wrap;    justify-content:flex-start;}.input-group {    display:flex;    flex-wrap:nowrap;    justify-content:flex-start;}