Guide to dynamically adjust the height of a container based on its content?

I'm looking for a way to smoothly change the height of the #app element when adding or removing a new item. It seems like it should be simple, but I can't figure it out.

Is there a way to achieve this using pure CSS?

Any help would be appreciated, thank you.

Link to the code sandbox here

<template>
  <div id="app">
    <button @click="addItem">Add</button>
    <button @click="removeItem">Remove</button>
    <div v-for="(item, i) in items" class="box" :key="i">BOX</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    items: [1, 1]
  }),
  methods: {
    addItem() {
      this.items.push(1);
    },
    removeItem() {
      this.items.pop();
    }
  }
};
</script>

<style>
#app {
  text-align: center;
  color: white;
  margin-top: 60px;
  background: blue;
  height: auto;
  transition: all 1.5s ease;
}

.box {
  padding: 15px;
}
</style>

Answer №1

An animated element requires a specified measurement unit; simply using height: auto is inadequate.

To achieve the desired effect, you must calculate the height of the items using JavaScript

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

I want to create a Bootstrap 4 card deck that includes expand/collapse functionality for its content. The expanded content should only impact the current

I am experiencing an issue with my card decks and expand/collapse functionality. Currently, when I expand one card in the deck, all the other cards in the row also expand, leaving a large blank area. This becomes problematic especially when the content is ...

Move Picture with Click (like the action on Google Maps)

Currently on the lookout for some code that will enable me to manipulate a floor plan in a manner reminiscent of the one showcased at whitehouse.gov I am in the process of coding a website that would benefit from integrating a similar function with their ...

Dynamically indicate the destination for AJAX success feedback across various forms

Here are a couple of inquiries: Is there a way to incorporate a second form on the same page and dynamically handle each form based on which submit button is clicked? Let's say I have several forms on one page. How can I alter the output destina ...

Communication breakdown between components in Angular is causing data to not be successfully transmitted

I've been attempting to transfer data between components using the @Input method. Strangely, there are no errors in the console, but the component I'm trying to pass the data from content to header, which is the Header component, isn't displ ...

Unable to locate the sibling element using CSS Selector with Selenium

When using a CSS Selector to click on the next sibling element in Selenium WebDriver, an InvalidSelectorException is thrown. If we consider my DOM structure: <div class="checkbox-group"> <div> <span class="checkbox">::aft ...

Leveraging Generic Types in React with TypeScript for Dynamically Assigning HTML Props based on Element Tags

I am frequently in need of a component that is essentially just a styled HTML tag. A good example is when I want to create beautifully styled div elements: // Definitions const styledDiv = (className: string) => { const StyledDiv = React.FC<HTMLA ...

Captivating images paired with informative captions

I am trying to display a picture with a description inline, but I am facing some issues. While I was able to align two pictures using div block:inline, adding a description to the first picture caused it to extend in width (despite setting margin: 0 and a ...

The appearance of a printed webpage does not match what is shown in Google Chrome's Print Preview feature

I have encountered a strange issue that has me stumped. I need the webpage in my current project to be completely printable, but I'm facing difficulties. While the signature field and note field (with the text "erererer") display perfectly in Google C ...

I want to integrate a Google translate plugin into my Vue App, but I'm unsure where to

Is there a way to integrate the Google Translate plugin into my Vue App? I have the following code snippet: <div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.tra ...

The MarkCompactCollector was unsuccessful in promoting the young object due to a failed allocation process

After successfully cloning a Git repository that houses a Vue project using the command git clone, I proceeded to run npm install in order to install all necessary dependencies, resulting in the creation of the node_modules folder. However, upon executing ...

Embedding a Material-UI Icon into an Input Field within a React Application

Hello, I am currently using a datepicker provided by Material-UI Datepickers. When utilizing the Inline datepicker option, I would like to include a calendar icon within the input field. Below is the code snippet representing the input element. How can I ...

Strategies for accessing elements within a #shadow-root

Having trouble changing the display style inside of the #shadow-root and targeting it. Can I do it through CSS or JS? #retirement-services-modal #rs-two-col::shadow(.wrapper) { display: flex; align-items: center; } ...

What is the best way to customize the cursor for each individual div?

Can you alter the cursor from a pointer to "not-allowed" within the div or GridList element in ReactJS or Material UI? ...

Enhance your design with Bootstrap 4's innovative spacing

Recently started using Bootstrap. Here's the HTML code I have. How can I achieve consistent spacing between all my box elements without causing any of them to wrap on larger screens like laptops and desktops? In the past, I would use CSS-grid for this ...

Vue: Clear the current form selection with a button click

<b-row class="mb-3"> <b-col> <div class="float-right"> <b-form-select v-model="selected" :options="options" ></b-form-select> ...

Is it possible to have a never-ending slideshow with inline-blocks?

After spending countless hours trying to troubleshoot my code, I am now seeking help from the wonderful people of the internet! ;) It seems like only a small portion of my code is incorrect. What I'm attempting to do is move the leftmost object in the ...

Steps for encoding a CSV export with HTML:

When I retrieve data from a string that is HTML encoded as Quattrode® I end up with Quattrode® after viewing it in Excel 2007. Here is the routine: Response.Clear(); Response.Buffer = true; Response.ContentType = "text/ ...

Avoiding special characters in URLs

Is there a way to properly escape the & (ampersand) in a URL using jQuery? I have attempted the following methods: .replace("/&/g", "&amp;") .replace("/&/g", "%26") .replace("/&/g", "\&") Unfortunately, none of these are y ...

Error message: "Unable to locate command after successful installation of @vue/cli

I recently installed @vue/cli using npm with the command npm install -g @vue/cli. However, when I attempt to use the vue command, it returns -bash: vue: command not found. To troubleshoot this, I added export PATH="/usr/local/Cellar/node/11.2.0/lib/node_mo ...

Is it considered acceptable to utilize a v-model's value as the basis for an if-statement?

How can I incorporate the v-model="item.checked" as a condition within the validations() function below? <table> <tr v-for="(item, i) of $v.timesheet.items.$each.$iter" > <div> <td> ...