Images are displayed below the sidebar in the middle of the page and not from the top (Vue.Js)

Issue

I'm building a photo website with Vue.JS and encountering the problem mentioned in the titled. I've tried everything, and after two hours of back and forth with ChatGPT I've decided to come here.

This is the code from the parent component ("MainNav")

<template>
  <div class="main_container">
    <header class="header mx-5 my-9 absolute text-xl">Gonçalo Dias</header>
    <div class="m-5 mt-80 space-y-1">
      <div
        class="sidebar-item"
        @mouseover="showInnerSidebar"
        @mouseleave="hideInnerSidebar"
      >
        Projects
        <div
          v-if="showProjectsInner"
          class="inner-sidebar space-y-0.5 mt-1 mb-2"
        >
          <div
            v-for="(project, index) in projects"
            :key="index"
            class="inner-sidebar-item indent-4"
            @click="handleProjectClick(project)"
          >
            {{ project.name }}
          </div>
        </div>
      </div>
      <div>Diary</div>
      <div>Info</div>
    </div>

    <ProjectOne
      v-if="selectedProject && selectedProject.name === 'Project 1'"
      :style="{ marginTop: selectedProject ? '10px' : '0' }"
    />
  </div>
</template>

<script>
import ProjectOne from "./ProjectOne.vue";

export default {
  components: {
    ProjectOne,
  },
  data() {
    return {
      showProjectsInner: false,
      selectedProject: null,
      projects: [{ name: "Project 1" }, { name: "Project 2" }],
    };
  },
  methods: {
    showInnerSidebar() {
      this.showProjectsInner = true;
    },
    hideInnerSidebar() {
      this.showProjectsInner = false;
    },
    handleProjectClick(project) {
      this.selectedProject = project;
      this.showProjectsInner = false;
    },
  },
};
</script>

<style lang="scss">
.header {
  top: 0;
  left: 0;
  width: 100%;
}
</style>

This is the code from the child component:

<template>
  <div>
    <div class="main_box project-image">
      <img :src="require('@/assets/Project1/001.jpg')" />
      <img :src="require('@/assets/Project1/005.jpg')" />
      <img :src="require('@/assets/Project1/022.jpg')" />
      <img :src="require('@/assets/Project1/034.jpg')" />
      <img :src="require('@/assets/Project1/036.jpg')" />
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss">
.main_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.project-image {
  max-width: 100%;
  max-height: 100vh;
  margin: 4px;
}
</style>

And this is how it's looking:
pay no mind to massive size of the image, I'm trying to first resolve this issue before anything else

I'm a beginner so there's not many solutions coming to mind, but with the help of Chat GPT i've fumbled with CSS properties, tried multiple variations, but nothing allowed my images to break that sidebar container. My guess is this is a problem specific of CSS and template relationship between components, so an issue that has to do with the Vue system.

Solution

I think you did a mistake in this code by using adding mt-80. Remove it and see what happen

<template>
  <div class="main_container">
    <header class="header mx-5 my-9 absolute text-xl">Gonçalo Dias</header>
    <div class="m-5 mt-80 space-y-1"> <!--in this line--!>
    ...
    </div>
  </div>
 </template>

If it's not working comment below.

Happy-Coding

Answered By - Prasanna Indrajith