Within my VueJS project, I am faced with nested elements that are generated dynamically like this:
<container>
<outerElement class="outer" v-for="obj in objects">
<innerElement class="inner" v-for="element in obj"/>
</outerElement>
</container>
The issue arises when styling these elements using CSS. As the innerElements need to be movable, they require the outer element to match the size/position of the container.
Is there a way in CSS to eliminate the box-model from the 'outer' class while still being within the container?
Here's an illustration of what I am attempting to accomplish. https://i.stack.imgur.com/MGlD4.png
UPDATE:
To address the mentioned XY-Problem, here is a simplified version of the template, utilizing the same implementation techniques as in my application.
... (omitted for brevity) ...However, the current issue in this code is that the innerElements cannot be moved inside the container because the outerElement serves as their container.
As changing the parent selector to utilize the container instead of the outerElement seems challenging, I am struggling to find a solution.
Therefore, I considered removing the borders of the outerElements to allow the innerElement to use the container as its parent.
But upon reflection, my approach may seem unconventional, especially considering that the vue-draggable-resizable component will naturally consider the outerElement as the parent.
Take a look at this snapshot showcasing the dilemma: https://i.stack.imgur.com/59AqF.png
The draggable boxes remain restricted from moving inside the container due to the outerElement not inheriting the position and size of the container.