css을 이용 다른 element의 높이와 같은 높이로 설정하기

회사 admin 사이트에 vuetify3 을 사용해서 만들었는데 뭔가 layout 이 내 마음에 들지 않았다. 
v-navigation-drawer 을 사용하고 있었는데 dim 처리가 화면 전체를 가리지 못하고 딱 body 의 높이 만큼만 보여주는 문제가 있었다.  아무리 찾아봐도 이것에 대한 기능이 없어서 css 을 사용해서 dim 처리된 반투명한 검은색 layout 을 높여주려고 했다.
그런데 이게 뭔가 높이를 참조해야 하는 것 끼리 예쁜 관계(css selector 로 쉽게 처리 할 수 있는 관계)가 아니었다.
그래서 혹시 특정 div 의 높이를 참고해서 높이를 따라 만들 수 있는 기능이 있나 하고 찾아 봤다. 그랬더니 anchor-size 라는 css 함수를 발견했다. 

결론부터 말하면 가능하고 다음과 같이 처리 하면 된다. anchor-name, position-anchor, anchor-size 을 잘 이용하면 된다.
https://jsfiddle.net/nahanmil/bwmro68d/19/

<style>
#src{
  width: 250px;
  border: 1px red solid;
  anchor-name: --target-height;
}
#src textarea{
  width: 200px;
  field-sizing: content;
}

#target{
  width: 250px;
  border: 1px blue solid;
  position-anchor: --target-height;
  height: anchor-size(height);
  position: absolute;
}

</style>


<div id="src">
<textarea>
Test
</textarea>
</div>
<br/><br/>
<div id="target">
auto resize height
</div>

textarea 크기를 마우스로 변경하거나 값을 넣어서 변경시키면 이 크기에 따라서 auto resize height 라고 쓰여진 div 박스도 같은 height 로 설정된다. 

오늘 기준으로 구글 AI 검색도 몰랐던 2026년 새 기능이다. (Baseline 2026 이라서 웬만한 최신 브라우저 다 지원하는 기능이다. )