The size adjustment breaks when parent container has the flex-grow property

[Yaspeace]

I have written some test component that shows incorrect behaviour:

<template>
  <div class="test-wrapper">
    <div style="background-color: blue;">
      Test1
    </div>
    <div style="flex-grow: 1;">
      <VueSlickCarousel style="background-color: red;">
        <div v-for="i in 10" :key="i" style="width: 30px;">SomeText{{ i }}</div>
      </VueSlickCarousel>
    </div>
  </div>
</template>

<script>
import VueSlickCarousel from 'vue-slick-carousel'

export default {
  name: "TestView",
  components: {
    VueSlickCarousel,
  },
}
</script>

<style scoped>
.test-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
</style>

And got such result:

[Aybee5]

I just experienced something similar, my scenario, is I am using it inside flex without even using flex-grow, I was able to make it work by setting overflow: auto on the div surrounding the carousel