css - firefox height does not grow up but works in chrome -


i have 2 display: table-cell columns. left 1 has button , adds content left column when clicked. , right 1 has text box should grow height height of left column. so, gave fixed height value right column: #step-right { height: 10px; }.

this works fine in chrome still having issue in firefox. found firefox have issue regarding height: 100% not same problem. want solve using no js tricks.

any appreciated. thanks

function step() {    var stepleft = document.getelementbyid('step-left');    stepleft.innerhtml = 'step <br/>' + stepleft.innerhtml;   }
* {    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%;  }
<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>


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -