Doesn't work with flex-direction: row

[raykudo]

I'm using Laravel mix with vue-content-loading": "^1.6.0 installed

<style scoped>
.flex-row {
  display: flex;
  flex-direction: row;
}
</style>

<template>
  <div class="flex-row">
    <vue-content-loading :width="300" :height="100">
      <circle cx="30" cy="30" r="30" />
      <rect x="75" y="13" rx="4" ry="4" width="100" height="15" />
      <rect x="75" y="37" rx="4" ry="4" width="50" height="10" />
    </vue-content-loading>
  </div>
</template>

<script>
  import VueContentLoading from 'vue-content-loading';
  export default {
    components: {
      VueContentLoading,
    }
  }
</script>

Nothing is rendered if I put vue-content-loading inside flex-direction: row styled parent element. It works with flex-direction: column

Any solutions?