为什么全宽柔性箱柱挤压其兄弟姐妹？

当试图创建一个表格式布局，其中一个主列应占用所有可用空间时，主列会占用比所需空间更多的空间，并将其他列拖到容器边界之外。为什么全宽柔性箱柱挤压其兄弟姐妹？

我正在寻找的行为就好像我正在使用表格来表示这一点，我给出了一列width: 100%。

如果你看下面的例子，你会发现第一行的第二列被压扁，即使溢出被隐藏。第一列似乎比其他列表具有某种优先级。

我很好奇为什么会发生这种情况，以及可重复使用的解决方案。我不想在任何列上设置固定宽度。

.list { 
 
    border: 1px solid #000; 
 
} 
 

 
.list-row { 
 
    display: flex; 
 
    border: 1px solid #AAA; 
 
} 
 

 
.list-column { 
 
    border: 1px solid blue; 
 
    white-space: nowrap; 
 
} 
 

 
.list-column--main { 
 
    flex-grow: 1; 
 
} 
 

 
.hide-overflow { 
 
    overflow: hidden; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Example</title> 
 
<style type="unprocessed" id="AutoprefixerIn">%css%</style> 
 
<style id="AutoprefixerOut"></style> 
 
<script> 
 
AutoprefixerSettings = ""; //Specify here the browsers you want to target or leave empty 
 
document.getElementById("AutoprefixerOut").innerHTML = autoprefixer(AutoprefixerSettings || null).process(document.getElementById("AutoprefixerIn").innerHTML).css; 
 
</script> 
 
</head> 
 
<body> 
 
    <div class="list"> 
 
    <div class="list-row"> 
 
     <div class="list-column list-column--main hide-overflow"> 
 
     The main column that has a very very very very very very very very very very very very very very very very very very very very very long title 
 
     </div> 
 
     <div class="list-column"> 
 
     <a href="#">Close</a> 
 
     </div> 
 
    </div> 
 
    <div class="list-row"> 
 
     <div class="list-column list-column--main hide-overflow"> 
 
     A shorter title 
 
     </div> 
 
     <div class="list-column"> 
 
     <a href="#">Close</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2014-12-05 James van Dyke

使用flex-shrink属性，你可以指定哪些列应该收缩更多的时候是东西太宽的箱子。

.list-column { 
    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: auto; 
} 
.list-column--main { 
    flex-grow: 1; 
    flex-shrink: 100; 
    flex-basis: 100%; 
}

的list-column--main列是长仅有的一列，但它也是一个日渐仅列。其他栏不会超过其原始尺寸，也不会缩小。

我原本预计从flex-shrink: 1可以正常工作的规格，但实际上，像flex-shrink: 100这样大得多的东西实际上是我想要的。

更多阅读（flexbox规格）：http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink

来源

2014-12-05 18:07:33 Akrikos

This Works！我想知道它为什么这样工作，为什么'flex-shink：100'可以工作，但'flex-shink：1'不会，如果有人会详细说明的话。 – 2014-12-08 15:16:56

为什么全宽柔性箱柱挤压其兄弟姐妹？

回答

相关问题