Having trouble with a component containing a router-view that displays a flexbox? The issue arises when the flexboxes do not scroll properly, cutting off the last element in the v-for loop. Various solutions have been attempted, but none seem to fully resolve the problem.
Below is the template and relevant styles for the router view:
<template>
<div class="modal" ref="modal">
<div class="modalcontent" ref="content">
<p class="goback" @click="closeAnimation" ref="goback">←</p>
<div class="title">
<h1>Questions & Answers</h1>
</div>
<div class="routerview">
<router-view :posts="posts" v-slot="{ Component }">
<transition name="slide-in" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</div>
</template>
<style>
.routerview {
position: relative;
width: 80%;
margin: auto;
overflow-y: scroll;
left: 0;
right: 0;
outline: 10px red;
}
</style>
And here are the styles for the flexbox:
<template>
<div class="container">
<div class="flex-container" ref="flexcontainer">
<div class="question" v-for="post in posts" :key="post._id" @click="this.$router.push(`/forum/question/${post._id}`)">
<h1 class="qTitle">{{ post.title }}</h1>
<p class="qReplyAmt">{{ post.replies.length }} repl<span v-if="!plural(post.replies.length)">y</span><span v-else>ies</span></p>
</div>
</div>
<p>You've reached the end</p>
</div>
</template>
<style scoped>
.question {
width: 98%;
height: fit-content;
min-height: 0;
background-color: whitesmoke;
border-radius: 10px;
padding: 10px 10px 2px 15px;
cursor: pointer;
transition: all 200ms ease-out;
}
.question:hover {
background-color: rgb(255, 107, 107);
color: white;
}
.qTitle {
display: block;
}
.qReplyAmt {
position: relative;
top: -5px;
}
.flex-container {
display: flex;
align-items: center;
flex-direction: column-reverse;
width: 100%;
gap: 15px;
flex: 1;
}
</style>
Tried solutions include:
- Setting a height on .container, .routerview, .flex-container
- Setting overflow-y to auto & scroll on .container, .routerview, .flex-container
- Exploring various other answers to fix the scrolling issue with flexboxes