Question

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

我需要flex-container div中的所有flex-item（子元素）。

这是我的CodePen。

body {
    background:#ddd;
}
.flex-containerHome {
    height:600px;
    display:table;
    white-space:nowrap;
}
.flex-cotainerHead {
    display:inline-block;
    margin:0 auto;
}
.flex-container {
    padding: 10px;
    display: flex;
    flex-flow: column wrap;
    border:1px solid #fff;
    height:600px;
}
.flex-item:hover {
    background-color: #191975;
}
.flex-item {
    transition:background .5s;
    background: tomato;
    width: 150px;
    height: 150px;
    margin: 10px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    border-radius:15px;
}

<div class="flex-containerHome">
    <div class="flex-cotainerHead">
        <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>
     <div class="flex-cotainerHead">
        <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>
</div>

Answer 1

我试了一下，这是my fork。

我修改了.flex-containerHome以表现为flex。我还在flex: 1 0 auto元素中添加了.flex-container。我还删除了.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>

MODIFIED CSS

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

Answer 2

只需添加overflow：hidden并将flex流程更改为Flex容器类中的行换行，以使其正常工作。

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

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

2 个答案: