When flex items are stacked in a column, the bottom portion may be truncated

(Edit) Check out the codepen example here.

I am working on creating a stack of cards using Vue.js and flexbox to showcase different apps on my website. Each card is represented by a component and I utilize Vue's `for` function to display cards with the following HTML template:

<div class="card">
    <img src="">
    <h1>Title</h1>
    <a>Click</a>
</div>

This specific component is named "app-card". The cards are rendered within the following structure in the HTML:

<div id="app">
    <div class="row">
        <div id="card-container">
            <app-card> <!--The above HTML snippet from the template goes here--> </app-card>
        </div>
        <div id="main"></div>
    </div>
</div>

In order to style my card deck, I use the following SASS (CSS without curly braces in this case):

*
    margin: 0
    padding: 0 
    font-family: 'Montserrat', sans-serif !important
    box-sizing: border-box

.row
    display: flex
    flex-wrap: wrap
    justify-content: space-evenly
    align-items: auto

#card-container
    flex: 10%

#main
    flex: 90%

.card
    width: 100%
    margin-top: 0;
    margin-bottom: auto;

.card img 
    width: 100%
    max-width: 100%

.card a
    padding: 10px
    background: blue

However, the top of the next card in the deck overlaps with the bottom of the button of the preceding card, as shown in this image:

https://i.sstatic.net/nR80H.jpg

How can I address this issue? I'm transitioning from Bootstrap-4 to learning flexbox concepts recently.

htmlcssvue.jssass

Answer №1

To resolve this issue, simply include the margin-bottom property within the card class.

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif !important;

  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: auto;
}

#card-container {
  flex: 10%;
}

#main {
  flex: 90%;
}

.card {
  width: 100%;
  margin-bottom: 50px;   /* Add Margin Bottom */
}

/* No margin bottom for last card */
.card:last-child{
  margin-bottom:0;
}

.card img {
  width: 100%;
  max-width: 100%; 
}

.card a {
  padding: 10px;
  background: blue;
}
<div class="row">
  <div id="card-container">
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
    <div class="card">
      <img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
      <h1>Title</h1>
      <a>Click</a>
    </div>
  </div>
  <div id="main">

  </div>
</div>

Answer №2

.card a {
  padding: 10px;
  background: blue;
  display:block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a pop-up when hovering over a layer with react-leaflet

I am attempting to display a popup when hovering over a layer in react leaflet. Utilizing GeoJson to render all layers on the map and onEachFeature() to trigger the popup on hover, I encountered an issue where the popup only appeared upon click, not hover. ...

javascriptcssreactjsleafletreact-leaflet

A viewless Angular 2 component

Is it feasible to utilize Angular 2 without the need for a template or an @View? I am exploring alternative methods akin to the example shown below: Angular 1 index.html <div ng-controller="appcontroller"> <div ng-class="{active: isActive()}"& ...

javascripthtmlangularjstypescriptangular

Adjusting the size of content with CSS

I've been attempting to get an image to cover the entire screen on a device using CSS, but so far I haven't had any success. The image is within an :after pseudo element and content tag. Since it needs to be laid over the HTML, I can't use t ...

htmlcss

Creating input fields using Bootstrap HTML on a single line

Struggling with Bootstrap, I can't figure out how to display the following HTML inputs in a single line: <div class="row"> <div class="col-sm-8"> <div class="form-group"> <input class="form-control" ...

jqueryhtmlcsstwitter-bootstrap

Retrieve an image using screen resolution parameters [using only HTML]

During a recent interview, the interviewer posed an interesting question regarding 2 images: There is one large resolution image that needs to be displayed on laptops and desktops. There is also a small image that should only be shown on mobile devices. ...

javascripthtmlcss

What is the proper way to access the current value of a computed property from within its own computation method?

Our goal is to activate a query when a string reaches a length of 3 characters or more, and keep it activated once triggered. Leveraging the Vue 2 Composition API, we have implemented a reactive object to manage the status of queries: import { computed, de ...

typescriptvue.jsvuejs2vuejs3vue-composition-api

Encountering a docker issue specifically related to the Vue script not properly terminating

I'm experiencing an issue where the build process hangs instead of exiting. It seems like a problem related to Docker, but I'm not sure if it's due to the build script or Docker configuration. Here is the error message: 08:50:26 dist/js/ ...

node.jsdockervue.jsnpm

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

javascripthtmlreactjs

The default image field value in Django Rest Framework triggers a Validation error

Our development team utilizes REST and includes a site management feature on our app. This feature retrieves information such as name, description, title, and icon from the API. Additionally, we have an admin interface on a separate front-end app that can ...

pythondjangorestdjango-rest-frameworkvue.js

Encountering a 'redirect' error within the views.py file of a Django project

The registration form is working smoothly, however, I am encountering an issue with the redirect function in addUser. Upon attempting to save data in the admin panel, I am facing an error during the redirect process. from django.shortcuts import render,r ...

htmldjangopython-3.xdjango-2.1

Utilize Bootstrap v4 in styling and aligning buttons for a polished

With Bootstrap v4 dropping the .btn-group-justified class, a solution can be found at https://github.com/twbs/bootstrap/issues/17631 Here's how to justify the buttons: <div class="btn-group btn-group-justified" role="group" aria-label="Justified ...

cssbootstrap-4twitter-bootstrap-4

Is there a way to ensure that GIFs in jQuery Mobile always start from the beginning?

My cross-platform mobile app built with jQuery Mobile is a small quiz application. After each correct or wrong answer, I display a 3-second GIF. Currently, I have set up the code to show the GIF for 3 seconds before moving on to the next page: else if ($. ...

javascriptjqueryhtml

show a picture and text side by side

Here's the CSS code I'm using: <style type="text/css"> #box { width:100%; height:80px; background-color:#eeeeee; } .box-inner { width:80%; margin:0 auto 0 auto; text-align:center; } #text, #text a { font-siz ...

css

"Enhance Your Website with Custom jQuery Preloaders

Currently, I am facing a challenge while developing a website. Specifically, I am struggling with resolving the issue of a blank page being displayed. The website that I am working on involves functionality where swiping right triggers data insertion into ...

javascriptjqueryhtmljquery-mobilepreloader

Using regex to confirm prices are accurate

Can anyone assist me with validating input using regEx in Vue? I'm struggling to create one and haven't been able to find the correct pattern online for what I need. The specific validation I am attempting is for a price value that should be a f ...

javascriptregexvue.js

Configuring modules using Sass, CSS-Modules, Webpack, React, and TypeScript

I'm facing an issue with extracting types from my .scss files. I've tried various configurations and solutions, but nothing seems to work. Specifically, my goal is to utilize modules in a React app with TypeScript. Below is my webpack configura ...

reactjstypescriptwebpacksasscss-modules

The function _vm.$refs.menu.open is not defined

Utilizing vue-context to customize the default context menu, I encounter an error when trying to interact with it from a component. Below is my code snippet: <!-- Main --> <p @contextmenu.prevent="$refs.menu.open">test</p> <C ...

vue.js

Creating spacious gaps between list items

I have been working on creating a scrollable horizontal list using iscroll. Although the list functions properly, I am encountering an issue with spacing between each li item. Despite trying various solutions, I have been unable to remove the space betwe ...

cssiscroll

Create Vuetify components dynamically through programming

My goal is to dynamically create Vuetify components and insert them into the DOM. I've had success with simple components like v-card or v-dialogue, but I'm running into issues with v-data-tables. To demonstrate the problem, I set up a codesandb ...

javascriptvue.jscomponentsvuetify.js

Webpage video stalling due to buffering

Currently, I am developing personalized video controls and have integrated a @progress event to monitor the video buffering progress and adjust the width of a progress bar div: <video @progress="videoBuffer($event)"> videoBuffer(e) { if ...

javascripthtmlvue.js