[SIMPLE] Aide pour intégration d'un CodePen

Bonjour,

La solution à mon problème est sûrement extrêmement simple et c'est d'autant plus énervant.

J'essaye simplement de placer un CodePen (petit template) dans un container mais il est capricieux et n'apparaît pas. Un des commentaires (CSS) du code précise qu'il faut attribué une taille et une hauteur a l'objet sous peine de ne pas le voir apparaître et malgré ça je ne parvient pas a le faire apparaître.

CodePen : https://codepen.io/fabianmossberg/pen/yZMxzP

Voici mon container :

body{
    margin:0;
    padding: 0;
}

.container-wrap{
            width: 100vw;
			height:100vh;
			margin:0 auto;
			position: relative;
			background: url("../res/img/image.png") no-repeat center center;
			background-size: cover;
    overflow: hidden;
		}

Et voici le CSS que je dois adapter pour faire fonctionner l'ensemble :
(Avec commentaires traduis car a l'origine en chinoi ^^)

/* Ce style ne peut s'appliquer qu'à cette demo，Pour référence seulement，Personnalisable selon la conception ou les préférences */

html,body{ height: 100%; }

body { background: #20262E;
overflow: hidden; 
}

#app{
  overflow-x:hidden;
}

/* Des suggestions de référence de script directes sont ajoutées, sinon cela provoquerait un scintillement, un composant de fichier unique n’a pas besoin */

[v-cloak] { display: none; }

/* Attention! La largeur et la hauteur du composant doivent être définies, sinon il ne sortira pas！！！ */

#app .vue-tinder {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 23px;
  margin: auto;
  width: calc(100% - 20px);
  height: calc(100% - 23px - 18%);
  min-width: 300px;
  max-width: 355px;
}

/* La position des trois indicateurs d'état sur la carte, la transparence sera automatiquement ajustée par le composant */

.nope-pointer { right: 10px; }
.like-pointer { left: 10px; }
.nope-pointer,
.like-pointer {
  position: absolute;
  z-index: 1;
  top: 20px;
  width: 64px;
  height: 64px;
}
.super-pointer {
  position: absolute;
  z-index: 1;
  bottom: 80px;
  left: 0;
  right: 0;
  margin: auto;
  width: 112px;
  height: 78px;
}

/* Style d'image de fente */
.pic {
  width: 100%;
  height: 100%;
  background-size: cover;
}

/* Style de bouton */
.btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  max-width: 355px;
}
.btns img{ width: 80px; }

J'ajoute également le HTML et le JS au cas où :

HTML

<div id="app" v-cloak>
  <tinder
    ref="tinder"
    :queue.sync="queue"
    @submit="submit">
    <template slot-scope="{data}">
      <div
        class="pic"
        :style="`background-image:url(https://picsum.photos/710/1152/?random=${data.key})`">
      </div>
    </template>
    <img class="like-pointer" slot="like" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like-txt.png">
    <img class="nope-pointer" slot="nope" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope-txt.png">
    <img class="super-pointer" slot="super" src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-txt.png">
  </tinder>
  <div class="btns">
    <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope.png" @click="decide('nope')">
    <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/super-like.png" @click="decide('super')">
    <img src="https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like.png" @click="decide('like')">
  </div>
</div>

JS

new Vue({
  el: "#app",
  data: {
    queue: []
  },
  created () {
    this.getData()
  },
  methods: {
    /**
     * 用于产生demo用的数据
     * @method getData
     */
    getData () {
      const list = []
      for (let i = 0; i < 5; i++) {
        list.push({
          key: Math.random()
        })
      }
      this.queue = this.queue.concat(list)
    },
    /**
     * 点击按钮所绑定的方法，此方法为调用vue-tinder组件内方法的示例，仅供参考
     * @method submit
     * @param  {String} choice
     */
    decide (choice) {
      this.$refs.tinder.decide(choice)
    },
    /**
     * 自定义事件submit绑定的方法，移除卡片的回调
     * @method submit
     * @param  {Object} choice {type,key}
     */
    submit (choice) {
      switch (choice) {
        case 'nope': // 左滑
          break;
        case 'like': // 右滑
          break;
        case 'super': // 上滑
          break;
      }
      if (this.queue.length < 2) {
        this.getData()
      }
    }
  }
})