Textarea doesn't fill parent div's height

Question

I'm trying to make two columns (one with photo and selection, and other with textarea). I need my textarea to be the same height as column with photo, button and selection.

I painted right DIV to black and with help of "flex" it has the same size as left one. But setting height=100% !improtant; to textarea doesn't help.

Also, setting height=500px !important works well and make it 500px, so size is really changing. But 100% don't give me proper result.

.modalimg {
  width:100%;
  max-height:100px;
  margin-bottom:5px;
}

.modalimg + button {
  margin-bottom:5px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<div class="form-group row-eq-height">
  <div class="col-sm-2 col-sm-offset-1">
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded">
    <button class="btn col-sm-12 btn-primary">Upload</button>
    <select class="form-control">
      <option>One</option>
      <!--set of options-->
    </select>
  </div>
  <div class="col-sm-9 " style="background: #000000;">
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height"></textarea>
  </div>
</div>

Setting `height: 100%` on the textarea _does_ make it fill it's parent. Example https://jsfiddle.net/xkkkapjL/ . Perhaps it is because you spelt "important" incorrectly (`!improtant`). — Turnip, Sep 07 '16 at 11:47
If you tell your div to scale to `100%`, it will scale completely to the size of his parent that contains him, and not other element. If you set the `height` to `100%`, and change the size of the parent, you will see the changes. So your `textarea` will scale to the size of `col-sm-9`. — Justplayit94, Sep 07 '16 at 11:47

brod · Accepted Answer · 2016-12-09T17:51:55.950

2

You have applied the 'display:flex;' to the wrong element. Simply add the flex to the textarea container, i.e.

.col-sm-9, .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

edited Dec 09 '16 at 17:51

answered Sep 07 '16 at 13:16

brod

244
3
8

score 0 · Answer 2 · answered Sep 07 '16 at 13:00

using jquery we can get the height as you required

$( document ).ready(function() {
    var rightBoxHeight = $('.right-box-height').height();
  $('.left-box-height').css('height',rightBoxHeight);  
});

.modalimg {
  width:100%;
  max-height:100px;
  margin-bottom:5px;
}

.modalimg + button {
  margin-bottom:5px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row-eq-height">
  <div class="col-sm-2 col-sm-offset-1 right-box-height">
    <img src="https://pp.vk.me/c637522/v637522431/7314/Of3UbOiEb8o.jpg" class="modalimg col-sm-12 img-rounded">
    <button class="btn col-sm-12 btn-primary">Upload</button>
    <select class="form-control">
      <option>One</option>
      <!--set of options-->
    </select>
  </div>
  <div class="col-sm-9 " style="background: #000000;">
    <textarea type="text" placeholder="Body" class="form-control body-field row-eq-height left-box-height"></textarea>
  </div>
</div>

Textarea doesn't fill parent div's height

2 Answers2