1
TL; DR： -webkit-box-flex不會被flex和flex-grow屬性覆蓋。問題：爲什麼？ （運行代碼片段看證明。）爲什麼在Chrome和Firefox中不會覆蓋-webkit-box-flex？
CodePen（作品甚至在Firefox）：https://codepen.io/anon/pen/dWOrqN
龍版本：
這是HTML代碼：
<div class="STYLE2 style8 SPECIAL">
<div class="style1 STYLE2 style3 style4 style5 style7" style="flex: 1 1 0px; -webkit-box-flex: 1">
<div class="something">...</div>
<div class="style1 STYLE2 style3 style4 style5 style6" style="flex: 400 400 0px; -webkit-box-flex: 400;">...</div>
</div>
</div>
這是造型：
<style type="text/css">
.style1 {
display: flex;
flex-direction: column;
flex: 1 1 0em;
}
.STYLE2 {
display: flex;
flex: 1 1 auto;
overflow: hidden;
}
.style3 {
position: relative;
}
.style4 {
overflow: auto;
}
.style5 {
flex-direction: column;
}
.style6 {
height: 0;
}
.style7 {
width: 0;
}
.style8 {
display: flex;
flex-direction: row;
}
</style>
（我沒有太多的機會，改變代碼或CSS的結構，所以我只是把它，因爲它是）
，它會給這個谷歌瀏覽器版本58.0.3029.81β（64-在Windows 8.1中位）：
如果我添加CSS的只有一行的CSS的任何地方（上述其他樣式之前或之後，或者甚至只是在它添加到.STYLE2一開始）：
.SPECIAL {
-webkit-box-flex: 1;
}
它變成這樣：
爲什麼???
什麼是-webkit-box-flex在谷歌瀏覽器中執行的比flex更重要的版本58.0.3029.81 beta（64位）（和FIREFOX 52.0.1 !!!中的相同情況!!!）：1 1 auto ？爲什麼不用flex和flex-grow屬性重寫？我認爲在Chrome 58中我可以擺脫-webkit-box-flex。它是一個錯誤還是一個功能？ Webkit-box-flex與flex-grow不同嗎？
這裏是代碼片段與同類型的行爲來說明這個問題：
<!DOCTYPE html>
<html>
<head>
<title>test webkit-box-flex</title>
<style type="text/css">
.style3 {
display: flex;
flex-direction: column;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1 1 0em;
flex: 1 1 0em;
margin: 0;
outline: none;
}
.style2 {
display: flex;
-webkit-box-flex: 1; /* This is the line that changes the whole view */
flex-grow: 1;
flex: 1 1 auto;
overflow: hidden;
background: #bababa;
padding: 0;
}
.style1, .style1.style2 {
display: flex;
flex-direction: row;
}
.style4 {
top: 0;
bottom: 0;
width: 1.5em;
background-color: #e6e6e6;
}
.style3 {
position: relative;
overflow: auto;
}
.style2.style5, .style2.style7 {
flex-direction: column;
}
.style2.style5, .style2.style1 {
border: none;
}
.style2.style5>.style3.Fixed, .style2.style1>.style3.Fixed {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.style6 {
display: flex;
flex: 0 0 auto;
height: 2em;
padding-left: .3em;
white-space: nowrap;
background: #e6e6e6;
color: #333;
}
.style2.style5, .style2.style7 {
flex-direction: column;
}
.style2.style5>.style3.Flex {
height: 0;
}
</style>
</head>
<body>
<div style="position: absolute; left: 0px; right: 0px; top: 50px; bottom: 0px;">
<div style="height: 100%; width: 100%; display: -moz-box; display: -webkit-box; display: -ms-flexbox; -moz-box-orient: vertical; -webkit-box-orient: vertical; -ms-flex-direction: column;">
<div id="style2" class="style2 style1">
<div class="style4 style4Left">
<div class="style4ButtonsLeft" style="left: -60.5156px;">
<div class="style4Button key4460">Lipsum</div>
</div>
</div>
<div class="style3 style2 Fixed style5" flexwidth="300" style="flex: 0 0 300px; -webkit-box-flex: 0; display: none;">
<div class="style6">
<div>Library</div>
</div>
</div>
<div class="style3 style2 Flex style5" flexwidth="1" style="flex: 1 1 0px; -webkit-box-flex: 1;">
<div class="style6">
<div>Lipsum2</div>
</div>
<div class="style3 Flex" flexwidth="2" style="flex: 2 2 0px; -webkit-box-flex: 2;">
<div class="style6">
<div>Properties</div>
</div>
<div class="content">
<p>Select a component to see its properties.</p>
</div>
</div>
</div>
<div class="style3 style2 Flex style5" flexwidth="1" style="flex: 1 1 0px; -webkit-box-flex: 1;">
<div class="style6">
<div>Lipsum2</div>
</div>
<div class="style3 style2 Flex style7" flexwidth="400" style="flex: 400 400 0px; -webkit-box-flex: 400;">
<div class="style6">
<div>Lipsum5</div>
</div>
<div class="style6 tabs">
<div class="style6 selected">
<div>Lipsum4</div>
</div>
<div class="style6">
<div>View</div>
</div>
<div class="style6">
<div>Data</div>
</div>
<div class="style6">
<div>Servers</div>
</div>
</div>
<div class="style3 Flex" flexwidth="400" style="flex: 400 400 0px; -webkit-box-flex: 400;">
<div style="display: block;">
</div>
<div class="content">
Some content goes here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@Michael_B如果我能投票最多一次我會:) – LGSon