为什么 -webkit-box-flex 在 Chrome 和 Firefox 中没有被覆盖？

Question

TL;DR: -webkit-box-flex 不会被 flex 和 flex-grow 属性覆盖。问题：为什么？ (运行代码片段看证明。)

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，所以我就这样吧）

它会在 Google Chrome 版本 58.0.3029.81 beta（64 位）Windows 8.1 中给出：

并且如果我在 CSS 中的任意位置仅添加一行 css（在其他提到的样式之前或之后，甚至只是在开头将其添加到 .STYLE2）：

.SPECIAL {
  -webkit-box-flex: 1;
}

变成这样：

为什么？？？

-webkit-box-flex 在 Google Chrome 版本 58.0.3029.81 beta（64 位）（和 FIREFOX 52.0.1 中的情况相同！！！）比 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>

Answer 1

-webkit-box-flex: 1 对您的布局产生影响，因为它被应用到父级不的弹性项目有 display: flex.

.style2 的父级有多个用于 flex 容器的前缀规则。但是标准的、无前缀的 (W3C) 版本 – display: flex – 不见了！

您的代码：

因此，浏览器将 display: -webkit-box 识别为容器上的现行规则，这导致 -webkit-box-flex: 1 成为子项上的现行规则。

子项上的标准弹性属性，例如 flex-grow 和 flex，无法识别，因此会被忽略。

将 display: flex 添加到容器后，-webkit-box-flex: 1 将不再起作用，可以安全地移除。

此外，正如在开发人员工具中看到的那样，当 Firefox 看到 -webkit- 属性时，它会自动添加 -moz- 版本。

为什么 -webkit-box-flex 在 Chrome 和 Firefox 中没有被覆盖？

Why is -webkit-box-flex not being overridden in Chrome and Firefox?

html

css

webkit

google-chrome

flexbox