firefox高度不会长大，但在chrome中工作

Question

我有两个display: table-cell列。左边有一个按钮，单击时会向左列添加内容。右边有一个文本框，它的高度应该随着左列的高度增加。所以，我给右列提供了一些固定的高度值：#step-right { height: 10px; }。

这在chrome中运行良好，但在firefox中仍有问题。我发现firefox在height: 100%方面存在一些问题，但不能说这是完全相同的问题。我想解决不使用JS技巧的问题。

任何帮助将不胜感激。感谢

＆＃13;

＆＃13;

function step() {
  var stepLeft = document.getElementById('step-left');
  stepLeft.innerHTML = 'Step <br/>' + stepLeft.innerHTML; 
}

＆＃13;

* {
  box-sizing: border-box;
}

.step-content {
  display: table;
  background-color: blue;
}

.step-bar {
  display: table-cell;
  height: 100%;
}

#step-left {
  background-color: yellow;
}

#step-right {
  height: 10px;
  background-color: green;
}

.input-group {
  height: 95%;             
  display: table;
}

.input-group textarea {
  height: 100%;
}

＆＃13;

<div class="steps">
  <div class="step">
    <div class="step-content">
      <div class="step-bar" id="step-left">
        <button type="button" onClick="step()">Step</button>
      </div>
      <div class="step-bar" id="step-right">
        <span class="input-group">
          <textarea></textarea>
        </span>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;