Flexbox收缩而不包装

Question

我试图让两个并排的div使用flexbox进行换行。每当我只有div和背景颜色时，它工作得很好，但是当我开始添加更多项目时它就停止了工作。 div开始缩小，永不包裹。我尝试了flex-shrinking: 0;以及其他网站上发现的其他技术。无论如何这里是代码：

＆＃13;

＆＃13;

.page4 {
  height: 100%;
  width: 100%;
  margin: auto;
}

h2 {
  text-align: center;
  margin: 0 auto;
  width: 65%;
}

.flex-content {
  margin: auto;
  display: flex;
  flex-shrink: 0;
  width: 80%;
  height: 500px;
  margin-top: 30%;
}

.left {
  align-items: center;
  display: block;
  float: left;
  padding-right: 5px;
  background-color: blue;
  width: 45%;
  height: 500px;
}

.background {
  background-image: url('../pictures/weenies/longpaper.png');
}

.right {
  align-items: center;
  display: block;
  float: right;
  background-color: red;
  width: 45%;
  height: 500px;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#logopg4 {
  height: 300px;
  width: 300px;
}

.logopg4 {
  text-align: center;
  display: block;
}

＆＃13;

<div class="page4">
  <div class="flex-content wrap">
    <div class="left">
      <div class="subs">
        <h2>Subs N'</h2>
        <h2>Sandwiches</h2>
        <div class="subsNSandwiches background">

        </div>
      </div>
      <div class="hen">
        <h2>Hen House</h2>
        <div class="henpaper background">

        </div>
      </div>
      <div class="deezerts">
        <h2>DEEZERTS</h2>
        <div class="deezertspaper background">

        </div>
      </div>
    </div>
    <div class="right">
      <div class="logopg4">
        <img src="./pictures/subs/logo2.png" id="logopg4" />
      </div>
      <div class="rabbit">
        <h2>Rabbit Fixin's</h2>
        <div class="rabbitFixins background">

        </div>
      </div>
      <div class="xtraFixins">
        <h2>Xtra Fixin's</h2>
        <div class="xtrapaper background">

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

＆＃13;

＆＃13;

＆＃13;

我省略了HTML文件中的其他一些代码。对此问题的任何见解将不胜感激。

Answer 1

您为弹性项目（width和.left）定义了.right为45％，因此它们将始终保持45％宽，因此永远不会换行。

您可以添加min-width以避免这种情况 - 请参阅下面的示例，我将min-width: 400px添加到这两个元素中。

＆＃13;

＆＃13;

.page4 {
  height: 100%;
  width: 100%;
  margin: auto;
}

h2 {
  text-align: center;
  margin: 0 auto;
  width: 65%;
}

.flex-content {
  margin: auto;
  display: flex;
  flex-shrink: 0;
  width: 80%;
  height: 500px;
  margin-top: 30%;
}

.left {
  align-items: center;
  display: block;
  float: left;
  padding-right: 5px;
  background-color: blue;
  width: 45%;
  min-width: 400px;
  height: 500px;
}

.background {
  background-image: url('../pictures/weenies/longpaper.png');
}

.right {
  align-items: center;
  display: block;
  float: right;
  background-color: red;
  width: 45%;
  min-width: 400px;
  height: 500px;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#logopg4 {
  height: 300px;
  width: 300px;
}

.logopg4 {
  text-align: center;
  display: block;
}

＆＃13;

<div class="page4">
  <div class="flex-content wrap">
    <div class="left">
      <div class="subs">
        <h2>Subs N'</h2>
        <h2>Sandwiches</h2>
        <div class="subsNSandwiches background">

        </div>
      </div>
      <div class="hen">
        <h2>Hen House</h2>
        <div class="henpaper background">

        </div>
      </div>
      <div class="deezerts">
        <h2>DEEZERTS</h2>
        <div class="deezertspaper background">

        </div>
      </div>
    </div>
    <div class="right">
      <div class="logopg4">
        <img src="./pictures/subs/logo2.png" id="logopg4" />
      </div>
      <div class="rabbit">
        <h2>Rabbit Fixin's</h2>
        <div class="rabbitFixins background">

        </div>
      </div>
      <div class="xtraFixins">
        <h2>Xtra Fixin's</h2>
        <div class="xtrapaper background">

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

＆＃13;

＆＃13;

＆＃13;