Expand a div without causing any displacement to surrounding elements

If you have 4 colored divs (red, yellow, green, blue), with 2 per row, and need to expand the second (yellow) without creating a gap under the red, check out this solution. The blue will be positioned underneath the expanded yellow.

For a live example, visit this CodePen link: Code

<div id="app">
  <v-app id="inspire">
    <v-item-group>
      <v-container>
        <div class="row">
          <v-col
            v-for="(item, index) in colors"
            :key="index"
            cols="12"
            md="6"
          >
              <v-card
                class="align-center"
                height="auto"
                :color="item.color"
              >
                <v-card-text v-for="(c, ind) in item.content" :key="ind" @click="colors[index].content.push(c)">{{c}}</v-card-text>
              </v-card>
          </v-col>
        </div>
      </v-container>
    </v-item-group>
  </v-app>
</div>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    colors: [{color: 'red', content: ['sample content']},
            {color: 'yellow', content: ['sample content']},
            {color: 'green', content: ['sample content']},
            {color: 'blue', content: ['sample content']}]
  }
})

Answer №1

Expanding divs without gaps is achievable by utilizing display: flex and flex direction

In the following code snippet, I have implemented two columns of colors expanding vertically

You can include any number of colors

Check out the live demo on Codepen: https://codepen.io/chansv/pen/GRROyQZ?editors=1010

<div id="app">
  <v-app id="inspire">
    <div>
    <div style="width:50%; float: left;display: flex;
  flex-direction: column;">
      <div v-for="(color, index) in colors" :key="index" v-if="index % 2 == 0 && index == 0">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
      <div v-for="(color, index) in colors" :key="index" style="flex-grow: 1;" v-if="index % 2 == 0 && index != 0">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
    </div>

    <div style="width:50%;float: left;display: flex;
  flex-direction: column;">
      <div v-for="(color, index) in colors" :key="index" v-if="index % 2 == 1 && index == 1">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
      <div style="flex-grow: 1;" v-for="(color, index) in colors" :key="index" v-if="index % 2 == 1 && index != 1">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
    </div>
    </div>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    colors: [{color: 'red', content: ['sample content']},
            {color: 'yellow', content: ['sample content']},
            {color: 'green', content: ['sample content']},
            {color: 'blue', content: ['sample content']},
            {color: 'pink', content: ['sample content']},
            {color: 'grey', content: ['sample content']},
            {color: 'orange', content: ['sample content']},
            {color: 'indigo', content: ['sample content']},
            {color: 'purple', content: ['sample content']},
            {color: 'cyan', content: ['sample content']},
            {color: 'teal', content: ['sample content']}]
  }
})

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

Using the glob function within a PHP include statement to search through numerous web directories

Greetings to all readers, this is my first time posting here. I have limited experience with PHP and would appreciate your patience as I navigate through it. I manage a large static website that heavily relies on PHP includes for various sections like hea ...

Positioning a single column of iframes in the center

I have 6 graphs that I need to arrange in a grid with 2 rows and 3 columns. Each row should have one left-aligned graph, one center-aligned graph, and one right-aligned graph. However, the center-aligned graphs are not displaying correctly. Can someone hel ...

What could be causing my search form to fail to perform the search initially?

Isn't it strange that my search form doesn't work correctly the first time? You have to search again for it to function properly. Is there something wrong with my code? Fiddle HTML <form id='sform' action="/admin/search.php" metho ...

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Seeking advice on troubleshooting a CSS keyframes animation issue. I have created an animation with 5 frames where the background image fades and transitions to the next image smoothly in all cycles, except for the first cycle where it glitches before each ...

Hiding content with a fixed Bootstrap menu

How can I prevent the fixed menu in my web page from hiding content, especially when the screen size is reduced and responsive menu hides even more content? Here's an example of the code: <nav class="navbar navbar-inverse navbar-fixed-top" styl ...

When text is added to div elements, they are mysteriously pushed downward. This strange phenomenon occurs with inline-block elements

Why does the first element get pushed down when its child contains text? What causes inline-block to behave this way? Is there a way to align divs side-by-side while still allowing them to have children? For example, I want the grey box to contain a list ...

An error occurs when attempting to assign a value to a MUI file TextField

Struggling with setting the value of a MUI Textfield that has type="file" props, resulting in the following exception being thrown: Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable Interest ...

Steps for assigning an id to a newly created div within a parent div while in design mode

Imagine creating a div element with the attribute contenteditable="true", and then checking the console for what happens next: 1st. In the console, you only see a simple div tag. <div id="typbody" contenteditable="true" style="width:100%; height:200px ...

I've recently delved into the world of JavaScript and am currently working on creating a calculator website. However, I'm facing some challenges in getting it to function

I created a calculator code using HTML, CSS, and JavaScript for a website. However, due to my limited experience with JavaScript coding, I encountered some issues. Currently, I have only implemented the number input part (not operations or deletion), but w ...

The HTML body is given a right margin for proper spacing

Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...

Learning how to monitor the internal values of JSON data in Vue

I currently have an array named 'd' in my data and I am looking to monitor any changes that occur within its elements, keeping in mind that some of the elements are nested. To provide an example, if I were to change the value from Apple to Axe, ...

Tips for creating a responsive <tr> table with <td> cells

Struggling to create a scrolling table with CSS? When using overflow-y : auto, the <td> tag becomes overloaded in the <tr> element. Take a look at the example code below to see the HTML and CSS in action: HTML CODE : <table id="check" cla ...

What could be causing Chrome to reduce the display size in responsive mode?

My website is designed to be responsive and includes a viewport tag for mobile devices, as shown below: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> How ...

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Allow me to provide a clearer explanation here: Imagine an element placed on a webpage with a margin of 10% from the left side. When the size of the page is adjusted, the margin on the left decreases accordingly - for example, 10% from 1400px - 140px, and ...

How about wrapping a large amount of text three times and including a "read more" link?

I am tasked with creating an HTML element that automatically detects when text has wrapped three times, truncates the content, and adds a "more..." link at the end of the third line. Can this be achieved? If yes, what is the process to implement it? ...

Is it possible to choose only half of the elements using the :nth-child selector in

Consider this code snippet: <ul> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> <li>Hello Universe</li> </ul> Can we select exactly half of the total elements by ...

Perform a function dynamically once a specific textfield is filled and continuously while filling another textfield

Imagine we have two text fields - one for a first name and one for a surname. As I type in the surname field after already filling out the first name, a function called sug() should provide suggestions or perform some action each time I add another letter ...

Switching images upon hovering in AngularJS

Looking to change images on hover in my Angular app, encountered site peculiarities making CSS solution impractical. Resorted to using ng-mouseenter and ng-mouseleave for image swapping instead. landing.jade img.share-button(src='images/btn_share.p ...

What causes certain divs to protrude when the parent div has overflow:hidden property enabled?

Issue: I am facing difficulty aligning all elements within one div without any overflow issues. Even with the parent div set to overflow:hidden, some child divs are protruding out of the container. How can I resolve this problem? Example: http://jsfiddle. ...

Obtaining the source id using HTML5 Drag & Drop functionality

Is there a way to retrieve the id of the div I am dragging from, similar to how it is demonstrated here? Your insights are greatly appreciated. Thank you. ...