Make Flex Items Overlap

Make flex items overlap

Here's how I'd do this using flexbox.

.cards {  display: flex;  align-content: center;  max-width: 35em;}
.cardWrapper {  overflow: hidden;}
.cardWrapper:last-child, .cardWrapper:hover {    overflow: visible;}
.card {    width: 10em;    min-width: 10em;    height: 6em;    border-radius: 0.5em;    border: solid #666 1px;    background-color: #ccc;    padding: 0.25em;      display: flex;    flex-direction: column;    justify-content: center;    align-items: center;}

<div class="cards">  <div class="cardWrapper">    <div class="card">card 1 blah blah blah</div>  </div>  <div class="cardWrapper">    <div class="card">card 2 blah blah blah</div>  </div>  <div class="cardWrapper">    <div class="card">card 3 blah blah blah</div>  </div>  <div class="cardWrapper">    <div class="card">card 4 blah blah blah</div>  </div>  <div class="cardWrapper">    <div class="card">card 5 blah blah blah</div>  </div></div>

How to make flex items overlap

You can try adding negative margins to your "OR" div. Note you will have to increase the z-index too, and set a background colour to achieve the desired result.

You can append these classes to your class attribute:

... -mx-4 z-10 bg-black

You can check the result directly in this Tailwind playground.

How to make several elements overlap using display flex

I would suggest you to use max-height property along with visibility like this:

.overlay {
  max-height: 1000px;
}

.overlay.hidden {
  max-height: 0;
  visibility: hidden;
}

CSS Flexbox : problem with overlaping flex items on smaller screens

You have set the height of your flex container to 100vh.
flexbox just does what you ask, squashing everything to fit in one window.

Just remove height: 100vh; from .container

Elements Overlap in Flex Column

Adding margin to the columns makes the text overflow to the next row as Jesper's answer. If the width of the columns need not be fixed, one way to resolve this issue would be to change the width of the second column from w-11/12 to say w-10/12 and add a mr-2 to the first column

<div class="flex flex-wrap flex-row">
  <div class="flex-col w-1/12 mr-2">
    <h4 class="text-xl font-bold">01</h4>
  </div>
  <div class="flex-col w-10/12">
    <h4 class="text-3xl">Title</h4>
    <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet consectetur ex.</p>
  </div>
</div>

Here is how it looks when you add the above changes:

rendered output

How can I make a flex item grow taller (not wider) and overlap another item on hover?

as commented, grid is an option for the main layout, so an element can span through a few rows or colunms, an extra negative margin can pull it outside or hover the next row

an example spanning 2 rows :

.grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(180px, 180px));  grid-gap: 2em;  padding:1em;  justify-content: center;  background:#ddd}.item {  border: solid;  border-radius: 0.5em;  box-shadow: 0 0 15px;  margin:0;  padding:0;  display:flex;  flex-flow:column;}.item figcaption {  margin:0;  padding: 0.5em;  text-align-last: justify;}.item span {  display: inline-block;  text-align: left;}.item img {  max-width: 80%;  display: block;  margin: auto;  mix-blend-mode:multiply}.item form {display:none;}.item form {  margin:1em;  text-align:center;}.item form [type="number"]{ width:3rem}.item:hover , .item.active{  grid-row: span 2;  background: yellow;  margin-bottom: -50px;  position: relative;}.item:hover form , .item.active form{  display:block;}

<section class="grid"> <figure class="item">    <figcaption><span>Item's name</span> <span>Price </span></figcaption>    <img      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">    <form><input type="number"        min="1"  value="1" > <input type="submit"></form>  </figure>   <figure class="item">    <figcaption><span>Item's name</span> <span>Price </span></figcaption>    <img      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">    <form><input type="number"        min="1"  value="1" > <input type="submit"></form>  </figure>   <figure class="item">    <figcaption><span>Item's name</span> <span>Price </span></figcaption>    <img      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">    <form><input type="number"        min="1"  value="1" > <input type="submit"></form>  </figure>   <figure class="item">    <figcaption><span>Item's name</span> <span>Price </span></figcaption>    <img      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">    <form><input type="number"        min="1"  value="1" > <input type="submit"></form>  </figure>   <figure class="item">    <figcaption><span>Item's name</span> <span>Price </span></figcaption>    <img      src="https://target.scene7.com/is/image/Target/GUEST_ce4ac41d-c124-49db-8f0f-2f472ee51815?wid=488&hei=488&fmt=pjpeg">    <form><input type="number"        min="1"  value="1" > <input type="submit"></form>  </figure>  </section>

Using Flex, how to make right most div overlap left div as parent div width decreases

.left{
overflow: hidden;
}
.parent{
width:100%;
}

Adding an overflow property to the left div will hide the text as the right text overlaps it in combination with a parent that is 100% width. Works like a charm.

Make Flex Items Overlap