How do I limit height of some divs to other divs in the same parent div with display flex row?

huangapple go评论63阅读模式
英文:

How do I limit height of some divs to other divs in the same parent div with display flex row?

问题

我有一个具有display: flex; flex-direction: row; flex-wrap: wrap;的父div。在它内部有子div,我们称它们为a、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>
      <!-- 与此类似的更多项目 -->
    </ul>
  </div>
  <div class="list-container">
    <h2>List C</h2>
    <ul>
      <!-- 与此类似的更多项目 -->
    </ul>
  </div>
  <div class="list-container">
    <h2>List D</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

div b 和 c 可能包含大量项目,因此我想限制它们的高度。如何将b和c的高度限制为其他所有div的最大高度,如果它们更大,让它们在这种情况下可以滚动?我需要一个没有在css中固定a和d的高度的解决方案(类似于height: 100px;),因为它们是动态的,可以改变它们的高度。

英文:

I have a parent div with display:flex; flex-direction: row; flex-wrap: wrap;
Inside it there are child divs, lets call them a b c d

Each div has &lt;ul&gt;&lt;/ul&gt; with multiple items inside it.
So it's something like this:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-html -->

&lt;style&gt;
  .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;
  }
&lt;/style&gt;

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

<!-- end snippet -->

Divs b and c can take very huge amount of items, so I want to limit their height.

How do I limit b and c height to max height of all other divs, if they are bigger, making them scrollable in this case? I need a solution without a and d height fixed in css(something like height: 100px;) as some internet solutions suggest because they are dynamic and can change their height too

答案1

得分: 2

以下是翻译的代码部分:

<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>

希望这有所帮助。如果您需要进一步的翻译或帮助,请随时提问。

英文:

Assuming we're allowed to add an extra div inside the height-limited divs, we can do something like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月9日 15:22:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/75681512.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定