Есть ли способ использовать перетаскиваемый дочерний элемент для увеличения размера родительского элемента?

#css #reactjs

Вопрос:

Я создаю веб — приложение для заметок с помощью react. У меня есть стикеры, хранящиеся в отдельных контейнерах, и моя цель-иметь возможность изменять размер этих контейнеров, перетаскивая стикеры к краю контейнера. Я использую react-перетаскиваемый для перетаскивания заметок. Структура выглядит следующим образом: Перетаскиваемый элемент(чтобы весь контейнер мог перемещаться) -> Div(содержит примечания) ->> Перетаскиваемый элемент ->>> Div (Этот div хранит информацию для отдельной заметки). Вот css для родительского элемента:

   .contained-box-container {
position: absolute;
justify-content: center;
cursor: move;
color: black;
background-color: plum;
overflow-wrap: break-word;
border-radius: 5px;
padding: 1em;
margin: auto;
user-select: none;
height:50%;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
 

}

А вот css для дочернего элемента:

 .contained-box {
background-color: yellow;
width: 25vh;
height: 25vh;
 

}

Любая помощь будет признательна!

Gif текущего прогресса