带显示的按钮：flex在Safari中不起作用。导致尺寸和对齐问题

Question

我在显示方面遇到了一些问题：在Safari和iOS Safari中都有flex。 Safari存在对齐问题，iOS Safari具有对齐和大小问题。这是预期的还是Safari中的有效错误？

编辑：此外，Button内的子SVG的高度百分比也不起作用。这适用于所有其他浏览器。 我用另一个更高级的SVG元素示例，我添加了一个锚点来与按钮进行比较。 More advanced example here

My simple example

HTML:
<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span"></span>
    </button>
    <div class="sub-col">2</div>
    <div class="sub-col">3</div>
  </div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
</div>


CSS:
.flex {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: #666666;
  position: fixed;
  width: 100%;
}

.col {
  display: inherit;
  flex: 1 1 auto;
  background: #ccffcc;
}
.col-1 {
  flex: 0 0 10vh;
  background: #ffcccc;
}
.col-3 {
  flex: 0 0 10vh;
  background: #ccccff;
}

.sub-col {
  display: inherit;
  flex: 0 0 25%;
  justify-content: center;
  align-items: center;
}

.span {
  width: 10px;
  height: 10px;
  background: #ffaaaa;
}

截图：

它应该是这样的，并且在Chrome，FF和Edge（没有测试IE）

这就是它在Safari中的样子

这是iOS Safari

Answer 1

您无法将display flex设置为button和fieldset元素。 chk以下链接。用div或span标签包裹你的元素

https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers

Answer 2

按钮元素以及其他几个元素在某些浏览器中不能是flex容器。 Safari就是其中之一。

如果您愿意，可以尝试一个简单的解决方案。这个想法是，你将.span包装在.span-wrapper中。然后你让.span-wrapper成为你的flex容器。

就像那样：

HTML：

<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span-wrapper">
        <span class="span"></span>
      </span>
    </button>
    <div class="sub-col">2</div>
    <div class="sub-col">3</div>
  </div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
</div>

CSS：

.flex {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: #666666;
  position: fixed;
  width: 100%;
}

.col {
  display: inherit;
  flex: 1 1 auto;
  background: #ccffcc;
}
.col-1 {
  flex: 0 0 10vh;
  background: #ffcccc;
}
.col-3 {
  flex: 0 0 10vh;
  background: #ccccff;
}

.sub-col {
  display: inherit;
  flex: 0 0 25%;
  justify-content: center;
  align-items: center;
}

.span {
  width: 10px;
  height: 10px;
  background: #ffaaaa;
}

.span-wrapper {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  align-items: center;
}