1
TL; DR： -webkit-box-flexは、flexおよびflex-growプロパティによってオーバーライドされません。質問：なぜですか？ （証明参照するファイル名を指定して実行コードスニペット。）ChromeとFirefoxで-webkit-box-flexがオーバーライドされないのはなぜですか？
CodePen（でもFirefoxで動作します）：https://codepen.io/anon/pen/dWOrqN
ロングバージョン：
<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>
これは、HTMLコードです
これはスタイリングです：
<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の構造を変更するための多くの機会を持っていないので、それがあるように私はそれを置く）
そして、それはGoogle Chromeのバージョン58.0.3029.81ベータ版でこれを行います（64 Windowsの8.1でのビット）：
そして、私は他の上記のスタイルの前または後に（どこでもCSSでCSSの唯一の1行を追加し、あるいは単に非常に冒頭で.STYLE2に追加する場合）：
.SPECIAL {
-webkit-box-flex: 1;
}
それはこのようになります。
WHY？
Google Chromeバージョン58.0.3029.81ベータ版（64ビット版）（およびFIREFOX 52.0.1 !!!と同じケース）のフレックスよりも重要なのは、-webkit-box-flexとは何ですか：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