css - 尝试在 React 'cards' 周围设置 css 支架的高度

Question

我有一个页面，它是数据库输入应用程序中的一个选项卡。用户选择 3 个治疗选项之一，并为每个选项创建一个数据卡。然后按类型将它们组合在一起。我试图在屏幕左侧围绕每种类型创建一个括号，以使用户在视觉上更容易。我遇到的问题是让支架高度成为卡片组的一定百分比；相反，它似乎默认为视口(viewport)的百分比。理想情况下，它应该是每个卡组的 100%。

这是括号的CSS代码:

.grouping-vertical-line {
  width: 2px;
  height: 60%;
  border: 2px solid #074153;
  position: absolute;

  .vertical-text {
    transform: rotate(-90deg);
    transform-origin: left top 0;
    float: left;
    padding: 5px 25px 25px 0px;
    margin-top: 250px;
  }
}

.grouping-horizontal-line {
  width: 25px;
  height: 2px;
  border: 2px solid #074153;
}

.patient-input-card-container {
  height: auto;
}

这是 html 的代码(带有一些 jsx):

<div className="patient-input-card-container">
      <div className="grouping-horizontal-line"></div>
      <div className="grouping-vertical-line">
        <div className="vertical-text">{associationKey}</div>
      </div>
    </div>

Answer 1

您必须将容器设置为相对定位。

.patient-input-card-container {
   height: auto;
   position: relative;
 }