在Safari中，显示器弹性的按钮高度不均匀

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的父元素需要有弹性框才能使按钮变得灵活。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

JSFiddle