css - 使用 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>

我正在使用 Tachyon's classes为了显示。

我已经尝试使用 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>

这是 <Card> 的 JSX组件:

<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 仍然是 Tachyons)

Answer 1

这是一个使用纯 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>