英文:
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 <ul></ul> with multiple items inside it.
So it's something like this:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- 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 -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论