Pourquoi la transition depuis width : 100 % provoque-t-elle un saut de la transition ?

Question

J'ai créé un JSFiddle pour reproduire ce problème.

J'essaie de faire grandir un élément de grille en survol, mais cela provoque ce problème étrange où il passe sous un autre élément de grille, puis saute comme je l'attends.

Pourquoi cela arrive-t-il ? Y a-t-il un moyen de résoudre ?

.container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template: 1fr / 1fr 1fr;
  margin: 1em;
  grid-gap: 1em;
}

.box {
  height: 100%;
  width: 100%;
  transition: width 0.5s;
}

.one {
  background: pink;
}

.two {
  background: red;
}

.box:hover {
  width: 60vw;
}

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

Answer 1

J'ai écrit un article détaillé sur cet effet et je vous invite à le lire pour apprendre comment réaliser cet effet en utilisant CSS Grid : https://css-tricks.com/zooming-images-in-a-grid -layout/

.container {
  height: calc(100vh - 2em);
  display: grid;
  grid-template-columns: auto auto;
  margin: 1em;
  gap: 1em;
}
.box {
  width: 0;
  min-width: 100%;
  transition: width 0.5s;
}
.box:hover {
  width: 40vw; /* read the article to understand the math behind setting this value */
}

.one {background: pink;}
.two {background: red;}

body {
  margin: 0;
}

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

Answer 2

Vous pouvez combiner Flexbox avec flex propriétés abrégées :

.container {
  display: flex;
  gap: 1em;
  margin: 1em;
}

.box {
  flex: 1; /* This makes boxes take equal space by default */
  transition: 0.5s;
}

.box:hover {
  flex: 2; /* A hovered box expands twice as fast as a non-hovered */
}

Essayez-le :

.container {
  display: flex;
  gap: 1em;
  margin: 1em;
}

.box {
  flex: 1;
  transition: 0.5s;
}

.box:hover {
  flex: 2;
}


/* Demo only */

body {
  margin: 0;
}

.container {
  height: 100vh;
}

.box {
  height: 100%;
}

.one {
  background: pink;
}

.two {
  background: red;
}

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
</div>