flex-boxを使ってサイズがバラバラな二つの箱があった場合、中にあるboxにどちらも干渉せず、ちょうど真ん中にborderラインを引きたい場合どうしたら良いでしょうか?
html
<div class="flex-box">
<div class="red-box"></div>
<div class="yellow-box"></div>
</div>
css
.flex-box {
display: flex;
align-items: center;
justify-content: center;
}
.red-box {
height: 500px;
width: 400px;
margin-right: 10px;
background-color: red;
}
.yellow-box {
height: 200px;
width: 300px;
margin-left: 10px;
background-color: yellow;
}
やったこと
・真ん中に新しい div
タグを作ってcssで hieght: 100%
でborderラインを 1px
でやって見た
※注意 .red-box
に border-light: solid 1px;
、 .yellow-box
に border-left: solid 1px;
は線の長さが固定できないので使用できません。親要素のflex-boxの高さに合わせて線が引きたいです。
よろしくお願いいたします。