Safari 中显示 flex 的按钮高度不统一

Question

我有一个button 封装在div 下，结构如下：

HTML：

 <div class="parent-container">
      <div class="child child-1 col-xs-6">
        <button class="btn btn-primary">Customize Feed</button>
      </div>
      <div class="child child-2 col-xs-6">
        <button class="btn btn-default">Really Really Really Really Really Really Long CTA text</button>
      </div>
    </div>

CSS：

    .parent-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .child-1 {
      order: 2;
    }

    .child-2 {
      order: 1;
    }

    .child button {
      height: 100%;
      white-space: normal;
    }

    .child button {
      width: 100%;
    }

这两个按钮（无论是长文本还是短文本）都应该占据相同的高度，无论其内容的长度如何。它适用于所有浏览器除了 macOS 中的 Safari。

Demo

问题截图 （来自演示）：

Answer 1

我对您的 CSS 进行了一些更改并使其正常工作。

button 的父元素需要有弹性框才能使按钮变得灵活。

.parent-container {
  display: flex;
  flex-direction: row;
}

.child-1 {
  display: flex;
  flex: 1;
  order: 2;
}

.child-2 {
  order: 1;
}

.child button {
  flex: 1;
  white-space: normal;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="parent-container">
  <div class="child child-1 col-xs-6">
    <button class="btn btn-primary">Customize Feed</button>
  </div>
  <div class="child child-2 col-xs-6">
    <button class="btn btn-default">Really Really Really Really Really Really Long CTA text</button>
  </div>
</div>

JSFiddle