css 如何将某些div的高度限制为同一父div中其他div的高度，并显示flex行？[duplicate]

y3bcpkx1 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(167)

此问题在此处已有答案：

One flex/grid item sets the size limit for siblings（6个答案）
Limit height of flexbox item [duplicate]（1个答案）
4天前关闭。
我有一个带有display:flex; flex-direction: row; flex-wrap: wrap;的父div，其中有子div，我们称它们为B c d
每个div都有<ul></ul>，其中包含多个项，因此它是这样的：

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
  }

  .list-container {
    padding: 10px;
    border: 1px solid black;
  }

  .list-container h2 {
    margin-top: 0;
  }

  .list-container ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
  }
</style>

<div class="flex-container">
  <div class="list-container">
    <h2>List A</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List B</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List C</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
      <li>Item 17</li>
      <li>Item 18</li>
      <li>Item 19</li>
    </ul>
  </div>
  <div class="list-container">
    <h2>List D</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

分区B和c可以携带非常大量的物品，所以我想限制他们的高度。
我如何限制B和c的高度到所有其他div的最大高度，如果他们更大，使他们在这种情况下滚动？我需要一个解决方案，没有a和d的高度固定在css中（像height: 100px;的东西），因为他们是动态的，可以改变他们的高度太多

css

来源：https://stackoverflow.com/questions/75681512/how-do-i-limit-height-of-some-divs-to-other-divs-in-the-same-parent-div-with-dis

1条答案

按热度按时间

0qx6xfy61#

假设允许我们在高度受限的div中添加一个额外的div，我们可以这样做：

.flex-container {
  display: flex;
  flex-direction: row;
}

.list-container {
  padding: 10px;
  border: 1px solid black;
}

.list-container h2 {
  margin-top: 0;
}

.list-container ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}

.flexible {
  display: flex;
  flex-direction: column;
}

.flexible .flexible-child {
  flex-basis: 0px;
  overflow: auto;
  flex-grow: 1;
}

<div class="flex-container">
  <div class="list-container">
    <h2>List A</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="list-container flexible">
    <div class="flexible-child">
      <h2>List B</h2>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
      </ul>
    </div>
  </div>
  <div class="list-container flexible">
    <div class="flexible-child">
      <h2>List C</h2>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
        <li>Item 16</li>
        <li>Item 17</li>
        <li>Item 18</li>
        <li>Item 19</li>
      </ul>
    </div>
  </div>
  <div class="list-container">
    <h2>List D</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

赞(0）回复(0）举报 2023-03-14

我来回答

css 如何将某些div的高度限制为同一父div中其他div的高度，并显示flex行？[duplicate]

1条答案

相关问题

热门标签

最新问答