The size adjustment breaks when parent container has the flex-grow property
Yaspeace opened this issue · 1 comments
Yaspeace commented
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>
Aybee5 commented
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