Html 如何将所有子div包含到父div中？

为什么我的父div没有包装内容或子div

我需要flex容器div中的所有flex项（子元素）

这是我的名片

正文{
背景：ddd；
}
.flex集装箱房{
高度：600px；
显示：表格；
空白：nowrap；
}
.flex-cotainerHead{
显示：内联块；
保证金：0自动；
}
.柔性容器{
填充：10px；
显示器：flex；
柔性流：柱包裹；
边框：1px实心#fff；
高度：600px；
}
.flex项：悬停{
背景色：#191975；
}
.弹性项目{
过渡：背景。5s；
背景：番茄；
宽度：150px；
高度：150像素；
利润率：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：1em；
文本对齐：居中；
边界半径：15px；
}

1.
2.
3.
4.
5.
6.
7.
8.
1.
2.
3.
4.
5.
6.
7.
8.

我试了一下，下面是

我修改了

.flex containerHome

，使其与flex一样工作。我还向

.flex容器

元素添加了

flex:10 auto

。我还删除了

.flex cotainerHead

元素

修改的HTML

<div class="flex-containerHome">
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
  </div>
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
  </div>
</div>

我试过了，这是我的

我修改了

.flex containerHome

，使其与flex一样工作。我还向

.flex容器

元素添加了

flex:10 auto

。我还删除了

.flex cotainerHead

元素

修改的HTML

<div class="flex-containerHome">
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
  </div>
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
  </div>
</div>

---

只需在flex容器类中添加overflow:hidden并将flex流更改为行换行即可

.flex-container {
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  flex: 1 0 auto;
  border: 1px solid #fff;
  height: 600px;
  overflow: hidden;
}

---

只需在flex容器类中添加overflow:hidden并将flex流更改为行换行即可

.flex-container {
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  flex: 1 0 auto;
  border: 1px solid #fff;
  height: 600px;
  overflow: hidden;
}

---

我不想垂直弯曲所有项目。相反，我想用CSS动态调整宽度。（我的意思是如果我将宽度固定为600px。然后如果我添加更多子元素，子元素将再次从父元素中出来。因此我只想将所有子元素包装在一个Div中）我不想垂直调整所有项。相反，我想用CSS动态调整宽度。（我的意思是如果我将宽度固定为600px。然后如果我再添加一些子元素，子元素将从父元素中出来。所以我只想将所有子元素包装在一个Div中）完美！！。谢谢@kiiroSoraBut，如果我添加更多的父元素，你的代码就会崩溃。这是叉子。我想让所有的家长们一起表演。为了修复我为我发布的代码添加了

display:table

和

display:inline block

@KiiroSora09@user4709780我更新了代码笔中的实现，添加了flex流：行换行；对于父对象，并删除了子对象的“弹性”属性的“自动”，还添加了“最大宽度”和“最小宽度”，以便在有两个以上的父对象可用时，子对象将换行。但这取决于您，取决于您希望它如何运行。感谢您的更新，但我希望水平并排显示所有父元素。如果有溢出，则应将其隐藏，我需要底部的滚动条将其水平滑动。为了适应该功能，我添加了

display:table

和

display:inline block

。（简单的例子是windows 8主屏幕，所有组水平并排显示，用户可以滑动组）@kiirosora09也许您可以更改flex flow:row wrap；要调整流：行nowrap；在我的示例中，这将强制列并排，并显示水平滚动条，下面是CodePen中的示例：完美！！。谢谢@kiiroSoraBut，如果我添加更多的父元素，你的代码就会崩溃。这是叉子。我想让所有的家长们一起表演。为了修复我为我发布的代码添加了

display:table

和

display:inline block

@KiiroSora09@user4709780我更新了代码笔中的实现，添加了flex流：行换行；对于父对象，并删除了子对象的“弹性”属性的“自动”，还添加了“最大宽度”和“最小宽度”，以便在有两个以上的父对象可用时，子对象将换行。但这取决于您，取决于您希望它如何运行。感谢您的更新，但我希望水平并排显示所有父元素。如果有溢出，则应将其隐藏，我需要底部的滚动条将其水平滑动。为了适应该功能，我添加了

display:table

和

display:inline block

。（简单的例子是windows 8主屏幕，所有组水平并排显示，用户可以滑动组）@kiirosora09也许您可以更改flex flow:row wrap；要调整流：行nowrap；在我的示例中，这将强制列并排，并显示水平滚动条，下面是CodePen中的示例：