Geek Answers Handbook

Problems switching to flex: 0, but still working on flex: .0001?

While working on a small project, I came across a transition from flex: 1to flex: 0. It took me a while to realize that only for this the result was broken. After testing a bit, I found that it flexis transient, but not if one of the values ​​that it must pass is 0.

For example, from flex: 1to flex: .0001works, and almost gives me the same result, but it seems to me that it is hacked. I would like to understand why this is so, because I could not find and think of a good explanation for this.

.container1, .container2 {

  display: flex;
  display: -webkit-flex;
  
  height: 100px;
  width: 200px;
}

.container1 > div, .container2 > div {
  
  flex: 1;
  -webkit-flex: 1;
  
  transition: flex 1s, -webkit-flex 1s;
  -webkit-transition: flex 1s, -webkit-flex 1s;
  
  height: 100%;
}
.container1 > div:hover {

  
  flex: 0;
}
.container2 > div:hover {

  flex: .00001;
}

.a { background-color: blue }
.b { background-color: red }
<p> hover to activate the transition </p>

<p> doesn't work with a final flex of 0 </p>
<div class="container1">
  <div class="a"></div>
  <div class="b"></div>
</div>

<p> works with a final flex of .000001 </p>
<div class="container2">
  <div class="a"></div>
  <div class="b"></div>
</div>
Run code

I use Chrome 43, not yet tested in other browsers.

Can you give me a reasonable explanation of why this is so, or is it a mistake or not?

+4
1

Flexbox .

, / flex: 0. , 0 "flex-grow" . , 1000 100 , flex: 0 100 , flex:.001 , 1000 . ( , , .)

, flex 1 , ; . , flex: 0.5, 500px ( ) . , , flex.

, Chrome; . !

+4

More articles:


All Articles