Один элемент гибкости устанавливает ограничение высоты для братьев и сестер

У меня есть два элемента sibling, каждый из которых содержит динамический контент.

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

В некоторых случаях sibling-1 будет иметь больше контента, чем sibling-2 и наоборот. Я хотел бы, чтобы высота второго элемента sibling-2 всегда равнялась высоте первого sibling-1. Если высота sibling-2 больше, чем высота sibling-1, она переполнит div flex и, следовательно, будет прокручиваться.

Есть ли способ сделать это с помощью Flexbox?

ОТВЕТЫ

Ответ 1

Есть ли способ сделать это с помощью Flexbox?

В принципе, нет. Функция гибких равных высот основана на высоте контейнера, а не на отдельном брате.

Так что sibling-1 и sibling-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;
}
<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>

Ответ 2

Да, это возможно. Оставьте параметр sibling самой максимальной высотой и установите базовую формулу flex: 0 и flex-grow: 1, которая, согласно спецификации, расширит их до их родного брата высота. Абсолютного позиционирования нет. Нет высоты установки для любых элементов.

  main {
 дисплей: flex;
}

раздел {
 дисплей: flex;
 flex-direction: column;
 ширина: 7м;
 граница: тонкая сплошная черная;
 margin: 1em;
}

: not (.limiter) > div {
 flex-basis: 0px;
 flex-grow: 1;
 overflow-y: auto;
}Код>
  <main>
 < & секции GT;
   <div> Я дольше и прокручу мое переполнение. в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в потоке текст в тексте потока в тексте потока
     в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в </div>
 </раздел >

 < раздел class= "ограничитель" >
   <div> Родственники каждого родителя соответствуют моей высоте. в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в потоке текст </дел >
 </раздел >

 < & секции GT;
   <div> Я короче, но все равно отвечаю высоте. в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока в тексте потока </div>
 </раздел >
& Л; /& основная GT;код>

Ответ 3

Как я уже упоминал в комментариях и был продолжен в других ответах, метода flexbox нет.

Можно использовать position:absolute для второго брата, хотя... но так как это фактически не решение flexbox, это здесь только для информации.

.flex {
  margin: 1rem auto;
  position: relative;
  display: flex;
}
.sibling-1 {
  flex: 0 0 50%;
}
.sibling-2 {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: auto;
}


* {
  margin: 0;
  outline: 0;
}
.flex {
  width: 80%;
  margin: 1rem auto;
  border: 1px solid grey;
  position: relative;
  display: flex;
}
.sibling-1 {
  flex: 0 0 50%;
}
.sibling-2 {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: auto;
}
<div class="flex">
  <div class="sibling-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quia, voluptatum! Perspiciatis praesentium nemo, labore mollitia numquam recusandae voluptatem consectetur amet deleniti cum nesciunt blanditiis, esse quis doloremque vero! Reiciendis
      porro impedit perspiciatis. Amet in praesentium molestias ipsum ad quis quia doloribus, veniam unde, ea ducimus rerum porro tenetur voluptatem, a laudantium. Accusantium provident voluptatibus perferendis hic blanditiis laborum amet consequatur
      esse, fugiat doloremque consectetur ullam sequi, ratione perspiciatis, voluptatem eaque vitae rem repellendus in architecto vel nulla animi neque. Accusantium animi voluptatum, suscipit possimus,</p>
  </div>
  <div class="sibling-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque modi quibusdam aliquam officia illo itaque ratione, iste architecto ad blanditiis fugiat sequi laborum cupiditate voluptatum, autem non? Quibusdam ad eius hic rem id. Libero, tempora
      dicta reiciendis placeat nihil quia fuga iste aliquid quo minus labore sapiente fugit, similique non aliquam, beatae pariatur nobis fugiat! Ipsam nobis fugit maxime aliquam accusamus explicabo nostrum ab nemo adipisci dolorem qui porro ea pariatur
      corporis aut reiciendis optio, sint eum nam suscipit itaque aspernatur recusandae. Cumque qui quod doloremque. Ut voluptates, asperiores, laborum excepturi quam odit, quos rerum assumenda sapiente saepe nisi? Numquam placeat repellat eum dolorem
      reprehenderit dolores culpa id explicabo consequuntur. Quas nobis veritatis tempora animi similique earum commodi, laborum blanditiis dolor illo, eaque accusamus aliquid nam a ex, velit, maiores natus. Id totam ullam corporis. Repellat aperiam,
      distinctio maxime, dolorum illum labore recusandae. Sequi repellendus provident deserunt amet culpa, ratione dignissimos! Quibusdam delectus mollitia, ducimus. Error id architecto, ea molestias voluptate impedit inventore amet ducimus modi repellat
      in. Asperiores soluta veritatis id eius, distinctio nisi voluptates voluptatibus iste iusto error officia tempore! Ducimus sed commodi quisquam provident iure voluptatum aliquam, nobis rem dolore, consectetur, dolor rerum eum nam adipisci, libero
      beatae eaque aliquid sapiente? Eius, earum quas nostrum quasi reiciendis officia quaerat omnis. Cupiditate suscipit et tempora quibusdam perspiciatis eius cum, nisi facere animi. Delectus magnam inventore ipsum, veritatis reiciendis. Ipsum adipisci
      recusandae, similique quas labore voluptas animi eaque velit, alias eveniet qui libero obcaecati suscipit, quam nihil quos placeat.</p>
  </div>
</div>

Ответ 4

Да, вы можете это сделать, сделав братья и сестры 1 и 2 также гибкими контейнерами, а затем на sibling-2 сделайте абсолютный div (также контейнер flex) внутри, который будет родителем вашего скроллера

<div class="sibling-1 flex sibling"></div>
<div class="sibling-2 flex sibling">
    <div class="absolute flex scroller-wrap">
        <div class="relative vertical-scroller">
            your content here
        </div> 
    </div>
</div>

css:

.relative{
  position:relative;
}

.absolute{
  position:absolute;
}

.flex{
  display:flex;
}

.sibling-2{
  flex:1; 
}

.scroller-wrap{
  height:100%;
}

в sibling 2 просто устанавливают минимальную высоту на пикселях - полезно в ответных случаях, если братья и сестры 1 и 2 стекают друг друга на мобильных устройствах