如何获得flexbox尊重删除的元素？ [英] How to get flexbox to respect removed elements?

问题描述

我使用。

如您所见，元素是其最高兄弟的高度（第一个 li ）。

如果我删除了最高的元素， < / p>

我想要的是什么...

实际发生了什么...

作为一个有趣的注释，当你开始检查Web Inspector中的元素时，问题会自行解决，也许我可以重现这个通过显式地触发浏览器重绘，但我不想为CSS中应该处理100％的内容引入JavaScript。

有办法告诉

解决方案

我想出这一个...

将这两个属性添加到 li 元素...

  -webkit-box-flex：1; 
 min-height：0; 
  

jsFiddle 。

现在，当删除第一个元素时，其他元素会缩小到适合的大小。

I'm using Flexbox to achieve equal height columns in WebKit browsers.

I'm using this CSS...

ol {
   display: -webkit-box;   
}

ol li {
   width: 100px;
   background: #ccc;
   margin: 5px;
   padding: 5px;    
}

...and this HTML...

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, dolor sit amet, consectetuer.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>
​

...which produces...

jsFiddle.

As you can see, the three elements are the height of their tallest sibling (the first li).

If I removed the tallest element, I'd expect there to be a reflow in which the other elements became the height of the next tallest element.

What I expected...

What actually happened...

As an interesting note, when you start inspecting the elements in Web Inspector, the problem corrects itself. Perhaps I could reproduce this self-correcting by explicitly triggering a browser repaint, but I'd prefer not to have to introduce JavaScript for what should be handled 100% in the CSS.

Is there a way to tell Flexbox to shrink/recalculate when sibling elements are removed?

解决方案

I figured this one out...

Add these two properties to the li elements...

-webkit-box-flex: 1;
min-height: 0;

jsFiddle.

Now, when you remove the first element, the others shrink to fit.

这篇关于如何获得flexbox尊重删除的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！