Item adik beradik adalah terhad dalam reka letak flex/grid

Question

Saya mempunyai dua elemen adik-beradik, setiap satu mengandungi kandungan dinamik.

<div class="flex">
    <div class="sibling-1"></div>
    <div class="sibling-2"></div>
</div>

Dalam sesetengah kes, sibling-1 akan mengandungi lebih banyak kandungan daripada sibling-2, dan sebaliknya. Saya mahu ketinggian elemen kedua sibling-2 sentiasa sama dengan ketinggian sibling-1. Jika ketinggian sibling-2 lebih tinggi daripada ketinggian sibling-1, ia akan melimpahi flex .

Adakah terdapat cara untuk mencapai kesan ini menggunakan Flexbox?

Answer 1

Pada asasnya tidak. Ciri ketinggian fleksibel adalah berdasarkan ketinggian bekas, bukan sebarang elemen adik beradik tertentu.

Jadi, abang elemen 1 dan abang elemen 2 boleh sentiasa sama tinggi.

Walau bagaimanapun, flexbox tidak mempunyai mekanisme terbina dalam untuk mengekang sesuatu item supaya sama tinggi dengan elemen adik beradik.

Pertimbangkan untuk menggunakan ciri penentududukan JavaScript atau CSS.

Berikut ialah contoh menggunakan kedudukan mutlak:

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

<div class="flex">
  <div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
  <div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
</div>

jsFiddle

Answer 2

Ya, boleh. Kekalkan ketinggian maksimum yang ditetapkan oleh nod adik-beradik dan tetapkan flex-basis: 0和flex-grow: 1 nod lain supaya mengikut spesifikasi ia akan berkembang ke ketinggian yang sama dengan adik-beradik. Tiada kedudukan mutlak. Tiada ketinggian ditetapkan pada mana-mana elemen.

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>