兄弟項目在flex/grid佈局中被限制了大小
P粉134288794
2023-08-24 12:52:48
<p>我有兩個兄弟元素，每個元素都包含動態內容。 </p>
<pre class="brush:php;toolbar:false;"><div class="flex">
<div class="sibling-1"></div>
<div class="sibling-2"></div>
</div></pre>
<p>在某些情況下，<code>sibling-1</code>的內容會比<code>sibling-2</code>多，反之亦然。
我希望第二個元素<code>sibling-2</code>的高度總是等於第一個<code>sibling-1</code>的高度。如果<code>sibling-2</code>的高度大於<code>sibling-1</code>的高度，則會溢出<code>flex</code> div並可捲動。 </p>
<p>有沒有辦法使用Flexbox來達到這個效果？ </p>
基本上不行。 flex等高特性是基於容器的高度，而不是任何特定的兄弟元素。
所以，兄弟元素1和兄弟元素2總是可以等高。
但是，flexbox沒有內建的機制來限制項目的高度與一個兄弟元素的高度相同。
考慮使用JavaScript或CSS定位屬性。
這裡有一個使用絕對定位的範例：
.flex { display: flex; width: 200px; position: relative; } .flex>div { flex: 0 0 50%; border: 1px solid black; box-sizing: border-box; } .sibling-2 { position: absolute; left: 50%; top: 0; bottom: 0; right: 0; overflow: auto; }jsFiddle
#是的，這是可能的。保留兄弟節點設定的最大高度，將其他節點的
flex-basis: 0和flex-grow: 1設定為，根據規範，它們會擴展到與兄弟節點相同的高度。沒有絕對定位。沒有在任何元素上設定高度。main { display: flex; } section { display: flex; flex-direction: column; width: 7em; border: thin solid black; margin: 1em; } :not(.limiter)>div { flex-basis: 0px; flex-grow: 1; overflow-y: auto; }<main> <section> <div>我更长，会滚动溢出。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中 在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在</div> </section> <section class="limiter"> <div>每个父节点的兄弟节点与我的高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中</div> </section> <section> <div>我虽然较短，但仍然与高度相匹配。在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中，在流动文本中</div> </section> </main>