我怎样才能让一个元素失去它的盒子模型？

我正在使用VueJS并具有像这样动态创建的嵌套元素：

<container>
  <outerElement class="outer" v-for="obj in objects">
    <innerElement class="inner" v-for="element in obj"/>
  </outerElement>
</container>

现在，谈到CSS时，我遇到了一个小问题。由于innerElements旨在可移动，因此它们需要外部元素具有与容器相同的大小/位置。

CSS中是否有某种方法可以在保留在容器中的同时从“外部”类中删除框模型？

这是我要实现的目标的草图。

编辑：

为了解决提到的XY问题，这是简化版本的模板，使用与我的应用程序相同的实现方法。

<template>
  <div class="home">
    <h1>This is the main Page.</h1>

    <h2>Testing area:</h2>
    <br />Simple Data Example:
    <br />
    <div class="container">
      <button @click="simpleXOR()">XOR</button>
      {{ data }}
      <vue-draggable-resizable
        class="simple"
        v-for="(bit,index) in simpleData"
        :key="index"
        :w="50"
        :h="50"
        :parent="true"
        :resizable="false"
      >
        {{`Bit-${index} => `}}
        <status-indicator :status="bit ? 'positive' : 'negative'" />
      </vue-draggable-resizable>
    </div>
    <br />Nested Data Example
    <div class="container">
      <div class="outer" v-for="obj in nestedObj.data" :key="obj.name">
        <div class="label">
          <button @click="nestedXOR(obj.name)">XOR -> {{ obj.name }}</button>
          {{ obj.states }}
        </div>
        <vue-draggable-resizable
          class="inner"
          v-for="(state, index) in obj.states"
          :key="index"
          :resizable="false"
          :w="100"
          :h="50"
          :parent="true"
        >
          <div v-if="obj.contentType === 'TypeA'">
            <b>{{ `Bit-${index} of ${obj.name}` }}</b>
            <br />
            <status-indicator :status="state ? 'positive' : 'negative'" />
          </div>
          <div v-else>
            <b>{{ `Bit-${index} of ${obj.name}` }}</b>
            <br />
            <status-indicator :status="state ? 'active' : 'intermediary'" />
          </div>
        </vue-draggable-resizable>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "home",
  components: {},
  data() {
    return {
      simpleData: [0, 1, 0, 1],
      nestedObj: {
        data: [
          {
            states: [0, 1, 0, 1],
            name: "a",
            contentType: "TypeA"
          },
          {
            states: [0, 1, 0, 1],
            name: "b",
            contentType: "TypeB"
          }
        ]
      }
    };
  },
  computed: {
    data() {
      return this.simpleData;
    }
  },
  methods: {
    simpleXOR() {
      var x = [];
      for (var i = 0; i < this.simpleData.length; i++) {
        x.push(this.simpleData[i] ^ 1);
      }
      this.simpleData = x;
      console.debug(this.simpleData);
    },
    nestedXOR(name) {
      var index = this.nestedObj.data.findIndex(obj => {
        return obj.name === name;
      });
      var x = [];
      for (var i = 0; i < this.nestedObj.data[index].states.length; i++) {
        x.push(this.nestedObj.data[index].states[i] ^ 1);
      }
      this.nestedObj.data[index].states = x;
    }
  }
};
</script>

<style scoped>
.container {
  margin: auto;
  height: 200px;
  width: 1000px;
  border: 2px solid black;
  position: relative;
}
.simple {
  top: 0px;
  left: 0px;
}
.outer {
  display: contents; /* as suggested */
}
.inner {
  /* ??? */
}
.label {
  border: 1px dashed green;
  padding: 10px;
  height: 20%;
  width: 20%;
}
/* // This is the css for vue-draggable-resizable */
/* // DON'T EDIT unless customization is needed */
.vdr {
  touch-action: none;
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed black;
}
.handle {
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #eee;
  border: 1px solid #333;
}
.handle-tl {
  top: -10px;
  left: -10px;
  cursor: nw-resize;
}
.handle-tm {
  top: -10px;
  left: 50%;
  margin-left: -5px;
  cursor: n-resize;
}
.handle-tr {
  top: -10px;
  right: -10px;
  cursor: ne-resize;
}
.handle-ml {
  top: 50%;
  margin-top: -5px;
  left: -10px;
  cursor: w-resize;
}
.handle-mr {
  top: 50%;
  margin-top: -5px;
  right: -10px;
  cursor: e-resize;
}
.handle-bl {
  bottom: -10px;
  left: -10px;
  cursor: sw-resize;
}
.handle-bm {
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  cursor: s-resize;
}
.handle-br {
  bottom: -10px;
  right: -10px;
  cursor: se-resize;
}
@media only screen and (max-width: 768px) {
  [class*="handle-"]:before {
    content: "";
    left: -10px;
    right: -10px;
    bottom: -10px;
    top: -10px;
    position: absolute;
  }
}
</style>

Currently the problem in this code is that the innerElements can't be moved inside the container, because the outerElement is their container.

Since I can't change the parent selector to use the container instead of the outerElement this is hard to change.

Thus I wanted to make the outerElements borders non-existant so that the innerElement uses the container as parent.

But I suppose my thought is a bit weird, considering that the vue-draggable-resizable component will use the outerElement as parent anyways.

Here's a screenshot of the problem:

The moveable boxes can't be moved inside the container because the outerElement doesn't inherit the position and size of the container.