如題所示，當父div上啟用flex-wrap:wrap時，子grid容器的高度會翻倍。我不希望它這樣做，但更重要的是，為什么會發生這種情況？

我認為，如果/當添加更多的網格項目導致它換行時，網格的高度會簡單地調整...但我顯然漏掉了什么。

我希望它看起來像flex-wrap:nowrap啟用時的樣子，但我也希望它能換行....

在Codepen上查看

.container {
  width: 88%;
  margin: 2rem auto;
  max-width: 1400px;
}

.cno-event-search-filters__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cno-event-search-filters__filter-container {
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(auto-fit, max(240px));
  gap: 1rem;
}

<div class="container">
  <div class="cno-event-search-filters">
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Event Types</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Culture">
          <label for="Culture">Culture</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Entertainment">
          <label for="Entertainment">Entertainment</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Sports">
          <label for="Sports">Sports</label>
        </div>
      </div>
    </div>
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Locations</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Ampitheatre">
          <label for="Ampitheatre">Ampitheatre</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Capitol Lawn">
          <label for="Capitol Lawn">Capitol Lawn</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Capitol Museum">
          <label for="Capitol Museum">Capitol Museum</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Chapel">
          <label for="Chapel">Chapel</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Choctaw Village">
          <label for="Choctaw Village">Choctaw Village</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Playground">
          <label for="Playground">Playground</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Red Warrior Park">
          <label for="Red Warrior Park">Red Warrior Park</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Stickball Field">
          <label for="Stickball Field">Stickball Field</label>
        </div>
      </div>
    </div>
  </div>
</div>

這個怪癖有點棘手，所以我會試著用簡單的詞來解釋發生了什么。

首先，在定義flex-wrap時，您可以控制布局的性質，如規范中所述:

flex-wrap屬性控制flex容器是單行還是多行，

nowrap

flex容器是單行的。

包

flex容器是多行的。

即使在您的情況下，當您添加flex-wrap: wrap您的布局仍然被認為是& quot多行& quot算法與& quot單行& quot一個。

不同之處在于每行的大小是如何計算的，這也會影響項目的大小。這里大約是寬度，因為我們有一個列方向。

當你有一個& quot單行& quot布局(flex-wrap: nowrap)，計算線條的寬度很容易。從規格來看

如果flex容器是單行的并且具有確定的橫向尺寸，則flex行的橫向尺寸就是flex容器的內部橫向尺寸。

你的容器是一個塊元素，所以它的全寬(明確的橫向尺寸)。該寬度用作線條的大小，內部的元素將拉伸以適應該大小。合乎邏輯的行為，但我們可以改變它，我們刪除拉伸部分。

.container {
  width: 88%;
  margin: 2rem auto;
  max-width: 1400px;
}

.cno-event-search-filters__container {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.cno-event-search-filters__filter-container {
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(auto-fit, max(240px));
  gap: 1rem;
}

<div class="container">
  <div class="cno-event-search-filters">
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Event Types</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Culture">
          <label for="Culture">Culture</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Entertainment">
          <label for="Entertainment">Entertainment</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Sports">
          <label for="Sports">Sports</label>
        </div>
      </div>
    </div>
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Locations</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Ampitheatre">
          <label for="Ampitheatre">Ampitheatre</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Capitol Lawn">
          <label for="Capitol Lawn">Capitol Lawn</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Capitol Museum">
          <label for="Capitol Museum">Capitol Museum</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Chapel">
          <label for="Chapel">Chapel</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Choctaw Village">
          <label for="Choctaw Village">Choctaw Village</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Playground">
          <label for="Playground">Playground</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Red Warrior Park">
          <label for="Red Warrior Park">Red Warrior Park</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Stickball Field">
          <label for="Stickball Field">Stickball Field</label>
        </div>
      </div>
    </div>
  </div>
</div>

我猜是瀏覽器試圖自動計算尺寸的故障，給它一些幫助來定義你的容器是全寬的寬度:100% in & amp；_ _過濾器容器

&__filter-container {
    border: 2px solid black;
    display: grid;
    grid-template-columns: repeat(auto-fit, max(240px));
    gap: 1rem;
    width: 100%; /** <----- here! */
}

這是密碼本:https://codepen.io/Crist-bal-D-az-lvarez/pen/oNaydwO