为什么 flexbox 在包裹项目时不向下推后续内容？

Question

在for collectors div 换行之前，我的布局工作正常。此时，后续的what artists are saying div 不会被推到包装内容的下方。有人知道为什么吗？

我尝试将 `for collectors' 弹性框的 align-content 设置为各种设置。

附注使用 Tailwind.css

元素未包装时显示

未包装：

在元素被包裹时显示

包装后：

HTML

    <!-- for artist-for collectors -->
        <div class="for-artists-and-collectors flex flex-wrap">

            <div class="flex justify-start h-full bg-red">

                <div class="for-container flex flex-col justify-center w-full h-full bg-black px-8">
                    <h2 class="text-white pb-2">For Artists</h2>
                    <div class="text-sm text-white text-left pb-4">
                        I want to auction my artwork using K****o
                    </div>
                    <k-button style="height: 40px;">Create Account -></k-button>
                </div>

                <div class="for-artists-bg h-full flex-grow flex-shrink"></div>

            </div>

            <div class="flex justify-start h-full bg-green">

                <div class="for-container flex flex-col justify-center w-full h-full bg-gray px-8">
                    <h2 class="text-white pb-2">For Collectors</h2>
                    <div class="text-sm text-white text-left pb-4">
                        I want to discover & bid on original artwork
                    </div>
                    <k-button style="height: 40px;">Browse Auctions -></k-button>
                </div>

                <div class="for-collectors-bg h-full flex-grow flex-shrink"></div>

            </div>

        </div>
        <!-- /for artist-for collectors -->

        <!-- what artists are saying -->
        <div class="flex content-between">

            <div class="waas flex flex-col items-end">

                <h2 class="text-black waas-title text-right mb-6">
                    What artists are saying
                </h2>

                <div class="waas-controls flex">
                    <k-button 
                        style="height: 40px; width: 40px;" 
                        color="white"
                        class="mr-2">
                        <left-arrow-black />
                    </k-button>
                    <k-button style="height: 40px; width: 40px;">
                        <left-arrow-white class="right-arrow" />
                    </k-button>
                </div>

            </div>

            <div class="artist-profile">

            </div>
        </div>

风格

.for-artists-and-collectors {
    height: 220px;
}

.for-artists-and-collectors > div {
    flex:  1 1 50%;
    min-width: 300px;
}

.for-artists-bg {
    background-image: url("https://images.unsplash.com/photo-1482245294234-b3f2f8d5f1a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80");
    background-position: center center;
}

.for-collectors-bg {
    background-image: url("https://images.unsplash.com/photo-1536574753884-8c45a0431ecf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80");
    background-position: center center;
}

.for-container {
    max-width: 220px;
}

Answer 1

当在父元素上设置绝对高度，然后在子元素上设置百分比高度时，会出现问题。在我不知道任何其他测量组合也会导致问题。

编码

Problem 和 Solution

简化问题

<div class="parent">
  <div class="child-1">child 1</div>
  <div class="child-2">child 2</div>
</div>

<div class="other">Other div</div>

-

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 80px;
}

.parent > div {
  flex: 1 1 50%;
  min-width: 300px;
  height: 100%; /* this is the problem */
}

.child-1 {
  background-color: red;
}

.child-2 {
  background-color: green;
}

.other {
  width: 100px;
  height: 100px;
  background-color: orange;
}

解决方案

/* removed parent height */
.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent > div {
  flex: 1 1 50%;
  min-width: 300px;
  height: 50px; /* set an absolute height here */
}