Сделать два элемента одинаковой высоты динамически с помощью CSS

Question

У меня есть два контейнера: left и right.left содержит текст вверху и кнопки внизу;right содержит другие компоненты по центру.Высота right всегда выше left, но я не имею ни высоты right, ни left.Я хочу совместить начало текста left с началом right, а кнопки left с концом right.Чтобы сделать это, я пытаюсь сделать их обоих одинаковой высоты, но мне не удается это сделать.

Это визуальный эффект, который я хотел бы получить:

Вот пример кода:

<div id="parent" className="flex items-center justify-center vh-100 w-100">
    <div id="left" className="flex flex-column justify-between">
        <Text />
        <Buttons />
    </div>
    <div id="right" className="flex items-center justify-center">
        <TallStuff />
    </div>
</div>

Я использую классы Тахиона для иллюстрации.

Я уже пытался использовать flex: 1, flex-grow, align-items: stretch, height: 100% и другие на left безрезультатно.

---

Я переписываю, чтобы прояснить ситуацию.Я надеюсь, что это поможет вам, ребята, помочь мне.

У меня есть этот экран, на котором пользователь может щелкнуть книгу и посмотреть информацию о ней:

книги получают через сторонний API, поэтому я точно не знаю, насколько они велики.И поскольку этот экран еще находится в разработке, я не знаю, будут ли столбцы справа всегда такими, какие они есть сейчас.Когда что-то идет не так (т. Е. Текст слишком маленький), я получаю что-то вроде этого:

Где бы я хотел что-то похожее на это:

Это код для экрана, который вы видите:

<div className="flex h-100 items-center w-100">
    <section className="pt3 w-40">
        <Card
            authors={authors}
            cover={cover}
            date={date}
            plataforms={plataforms}
            synopsis={synopsis}
            title={title}
        />
    </section>
    <section className="flex flex-column items-center justify-center w-60">
        <BookCarousel books={data} title="main feeling" />
        <BookCarousel books={data} title="main feeling" />
    </section>
</div>

Это JSX компонента <Card>:

<article class="flex flex-column items-center justify-between pl3 pr3">
    <section>
    <Cover alt={title} src={cover} className="fl mr3" />
        <h2 className="di f5 ma0">{title}</h2><br/>
        {signature}<br/><br/>
        {summary}
    </section>
    <section className="flex">
        // buttons
    </section>
</article>

Он написан сReact.(CSS все еще Тахионы)

Answer 1

CSS Grid Way

Я бы рекомендовал начать со статьи CSS Tricks , в которой объясняется, как настроить базовую сетку и поместить в нее элементы.

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
}

.grid-x-lefttop,
.grid-x-leftbottom {
  grid-column-start: 1;
  grid-column-end: 2;
}

.grid-x-lefttop {
  background-color: green;
  grid-row-start: 1;
  grid-row-end: 2;
}

.grid-x-leftbottom {
  background-color: blue;
  align-self: end;
  grid-row-start: 2;
  grid-row-end: 3;
}

.grid-x-right {
  background-color: aqua;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

<div class="grid">
  <div class="grid-x-lefttop">
    <p>Left column text</p>
  </div>
  <div class="grid-x-leftbottom">
    <button>Left column button</button>
  </div>
  <div class="grid-x-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nisl vitae dolor porta ornare. Ut tincidunt rutrum ante sit amet tincidunt. Etiam gravida neque ut nisi tincidunt viverra. Ut maximus tincidunt ultricies. Cras tristique orci vel blandit hendrerit. Aliquam luctus nisl euismod porttitor dignissim. Praesent quis turpis convallis, venenatis magna sed, suscipit mi. Sed ac nisl sed felis fermentum imperdiet. Pellentesque vel ullamcorper arcu, quis aliquam ante. Proin molestie magna ac convallis hendrerit.</p>
    <p>Curabitur rutrum sollicitudin libero id ullamcorper. Nunc auctor dapibus mauris, sed viverra dui eleifend quis. Donec ut odio in sapien dictum pellentesque. Ut mauris enim, tristique a ultrices eu, tempor nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo cursus, facilisis sem sodales, iaculis diam. Cras venenatis arcu nisi. Nunc vel scelerisque orci. Vestibulum sit amet metus id augue maximus congue. Cras pretium fringilla dapibus. Nullam sollicitudin risus sit amet elit lobortis, vitae placerat dui rutrum.</p>
  </div>
</div>

Путь Flexbox

Этого также можно добиться с помощью вложенных элементов flexbox.

.flexcontainer {
  align-items: stretch;
  display: flex;
}

.flexcontainer-x-left,
.flexcontainer-x-right {
  flex: 1 1 100%;
}

.flexcontainer-x-left {
  background-color: green;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flexcontainer-x-buttons {
  background-color: blue;
}

.flexcontainer-x-right {
  background-color: aqua;
}

<div class="flexcontainer">
  <div class="flexcontainer-x-left">
    <div class="flexcontainer-x-text">
      <p>Left column text</p>
    </div>
    <div class="flexcontainer-x-buttons">
      <button>Left column button</button>
    </div>
  </div>
  <div class="flexcontainer-x-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nisl vitae dolor porta ornare. Ut tincidunt rutrum ante sit amet tincidunt. Etiam gravida neque ut nisi tincidunt viverra. Ut maximus tincidunt ultricies. Cras tristique orci vel blandit hendrerit. Aliquam luctus nisl euismod porttitor dignissim. Praesent quis turpis convallis, venenatis magna sed, suscipit mi. Sed ac nisl sed felis fermentum imperdiet. Pellentesque vel ullamcorper arcu, quis aliquam ante. Proin molestie magna ac convallis hendrerit.</p>
    <p>Curabitur rutrum sollicitudin libero id ullamcorper. Nunc auctor dapibus mauris, sed viverra dui eleifend quis. Donec ut odio in sapien dictum pellentesque. Ut mauris enim, tristique a ultrices eu, tempor nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo cursus, facilisis sem sodales, iaculis diam. Cras venenatis arcu nisi. Nunc vel scelerisque orci. Vestibulum sit amet metus id augue maximus congue. Cras pretium fringilla dapibus. Nullam sollicitudin risus sit amet elit lobortis, vitae placerat dui rutrum.</p>
  </div>
</div>

Answer 2

Вот краткий пример использования простого HTML и CSS.

  #parent {
    display: flex;
  }
  #left {
    display: flex;
    flex-direction: column;

    background: red;
  }
  #text {
    flex-grow: 1;
  }
  #right {
    flex-grow: 1;
    display: flex;
    align-items: center;

    /* arbitrary height for demo */
    height: 500px;
    background: blue;
  }
  

<div id="parent">
    <div id="left">
        <div id="text">
          <p>Text</p>
        </div>
        <div id="buttons">
          <button>Button</button>
          <button>Button</button>
          <button>Button</button>
          <button>Button</button>
        </div>
    </div>
    <div id="right">
      <div id="tallstuff">
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
    </div>
</div>

Answer 3

.row {
  display: flex;
}

.col {
  flex: 1;
}

<div class="row">
  <div class="col">In 2012, I found myself looking for a job. The startup I was working in was winding down and I spent my time idly looking for interesting things to do. </div>
  <div class="col">When AppsFlyer started, it was just 2 guys — Oren, the CEO, doing all the business and Reshef, the CTO, writing all the code. Reshef decided to write AppsFlyer, at the beginning, in Python. Why Python? Well, if you’re a startup that needs to grow and change code very rapidly, Python will probably serve you best. It’s a super simple language with a vast ecosystem that is both interpreted and dynamically typed, which means it’s really malleable and easy to twist and change. When I joined Reshef in writing the code, that’s what we did — we hacked away in Python to our heart’s content. We designed a microservice-oriented architecture that revolved around different Python services, which communicated mainly via pub/sub and http calls (which later evolved into a mostly async communication flow based on Kafka). This served us well for the first year and a half of AppsFlyer’s growth.</div>
</div>