html - 为什么我的 flex 元素会出现在容器外面？

Question

我正在使用 flex-boxes 来显示不同长度的小文本。

但是，当将它们包裹在 flex-direction: column; 中时，它们会出现在屏幕之外。我希望将它们包裹在容器内，以便在一页上可见。

为什么它们向右转(您必须在 codepen 窗口中向右滚动才能看到“测试服务 5”、“6”和“7”)，解决方案是什么？

.content {
  background-color: #ffa676;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.content-heading {
  width: 100%;
}

.content-main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: 750px;
  width: 100%;
  background-color: #c5dda9;
}

.content-main>div {
  display: inline-block;
  background-color: #f2c888;
  margin: 3px;
  padding: 5px;
  max-width: 50%;
}

<div class="content">
  <div class="content-heading">
    <p class="pagetitle-pretext">My</p>
    <h1 class="pagetitle">Services</h1>
    <hr>
  </div>
  <div class="content-main">
    <div>
      <h2>Test Service 1</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum </p>
    </div>
    <div>
      <h2>Test Service 2</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad
        eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 3</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad
        eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 4</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinpopulo integre adipiscing
        ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinpopu lo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinax
        vituperatoribus. Ad eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 5</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populan his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad eripuit concludaturque eum. Ne eirmo integre adipiscing ei, no habeo aeque
        soleat cum. Nominati argumentum an his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 6</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat olor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cucum. Nominati
        argumentum an his, pro ex doming lucilius honestatis, nec id pertinax vituperatoribus. Ad eripuit concludaturque eum. Ne eirm</p>
    </div>
    <div>
      <h2>Test Service 7</h2>
      <p>Lorem ipsum dolor sit amet, id sea rebumLorem ipsum dolor sit amet, id choro ridens, mea populo integre adipiscing ei, no habeo aeque soleat cum. Nominati argumentum an his, pro ex doming lucilius onestatis, nec id pertinax vituperatoribus. Ad eripuit
        concludaturque eum. Ne eirm</p>
    </div>
  </div>
</div>

codepen

Answer 1

如果我没有正确理解你的问题，那么问题出在

.content-main > div {
   max-width: 50%;
}

如果您将它更改为 width: 50%，它可以解决您的问题。

注意:使用此方法，每个元素将始终占宽度的 50%(即使没有足够的元素来换行)，因此它可能不是您的完美解决方案。