React 'cards'の周りにCSSブラケットの高さを設定しよう

Question

私はデータベースエントリアプリケーションのタブであるページを持っています。ユーザは、3つの治療オプションのうちの1つを選択し、それぞれについてデータカードを作成する。それらはタイプ別にグループ化されます。私は視覚的にユーザーのために簡単にするために各タイプの周りの画面の左側にブラケットを作成しようとしています。私が持っている問題は、ブラケットの高さをカードグループの特定のパーセンテージにすることです。代わりに、ビューポートのパーセンテージにデフォルト設定されているようです。理想的には、各カードグループの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; 
} 

これは、（いくつかのJSX付き）HTMLのコードです：

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