Transition in flex-basis not working when using flex-wrap:wrap

user_6705873 0
Viewed 209

I have been trying to do this animation with no success. Anybody has any clue how can I solve it? Thanks

Here is my CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex-basis: 30em;
  overflow: hidden;
  transition: flex-basis 1000ms ease-in-out;
}

.child:hover {
  flex-basis: 100%;
}

And my HTML:

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
  <div class="child">Child 5</div>
</div>
flexbox css-transitions css html
1 Answers

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex-basis: 20%;
  overflow: hidden;
  color: white;
  transition: flex-basis 1000ms ease-in-out;
  padding: 20px;
  background-color: red;
}

.container:hover .child {
  flex-basis: 100%;
}
<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
  <div class="child">Child 5</div>
</div>

user_170071840
Related