Make a <Textarea> Fill Remaining Height

TextArea fill remaining height in a div

A text input can only be single line. Unless you're talking about huge font size, I presume you mean a textarea, which allows multiline text input.

With a flex container, the children will automatically expand to cover the full height of the parent (align-items: stretch default). If you want to disable this full-height feature, you can override it where necessary (as I did on your button).

div {  display: flex;  height: 300px;}
textarea {  flex: 1; /* consume available width */}
input {  align-self: flex-start; /* override flex full-height columns feature */}

<div>  <textarea>textbox full height of parent</textarea>  <input type="button" value="button"></div>

Textarea to fill a parent container exactly, with padding

Use width: 100%; height: 100%; to make the <textarea> fill up the wrapping <div>. Unfortunately, you won't be able to put on margins/padding, as they get ADDED to the 100%, so the right/bottom edges will overflow.

Edit: To use width: 100%; along with padding, you can change the box sizing model:

    width: 100%;
    height: 100%; 
    box-sizing: border-box;

With this change, 100% now refers to the distance between the outsides of the borders, instead of the distance between the outside of the content.

How to set the height of textarea to fill the whole column?

You can use the flexbox utility classes (d-flex flex-column) to make the textarea fill the remaining height (flex-grow-1):

       <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 d-flex flex-column">
            <div class="form-group flex-grow-1 d-flex flex-column">
                 <label for="exampleFormControlTextarea1">Treść wiadomości</label>
                 <textarea class="form-control flex-grow-1" id="exampleFormControlTextarea1"></textarea>
            </div>
       </div> 

Demo: https://www.codeply.com/go/2z4ckbR2FU

How can I have a textarea take up the remaining height in a div?

Seems to be impossible to get this behavior work in other browsers than chrome.

I've tried to split the pictures and textarea in two CSS table-rows to give #images a height so that #textarea-container automatically adjust its height. The next step was to give textarea 100% height and 100% width.

Absolute positioning an element in a relative positioned table cell is not supported:
CSS Positioning inside of an HTML Table

So textarea { position: absolute; left:0;right:0;bottom:0;top:0 } in a relative positioned table cell will not work.

HTML

<div id ="parent">
    <div id="images">
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/20x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/120x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/50x20/cc5acc/fff.png" />
    </div>

    <div id="textarea-container">
        <textarea></textarea>    
    </div>    
</div>​

CSS

* { margin:0; padding: 0 }

#parent{
    width: 400px;
    height: 300px;
    display: table;
    background: blue;
}
#images {
    display: table-row;
    height: 0;
}

#textarea-container {
    display: table-row;
}

textarea {
    height: 100%;
    width: 100%;
}

! This solution depends on display: table, display: table-row and Google Chrome.

Live demo (works only in google chrome): http://jsfiddle.net/atTK7/4/

Display table support: http://www.quirksmode.org/css/display.html

A Javascript workaround for browsers, except for chrome, is recommended.

Bootstrap 4 textarea fill remaining 2nd column height

Just use the Bootstrap h-100 class. Remember height:100% only works if the parent has a defined height. Therefore use h-100 on both the inner div and textarea.

https://codepen.io/anon/pen/ePBXKR

<section class="contact-us">
  <div class="container" style="background-color: #D6EEFD">
    <div class="p-3">
      <h1 class="primary-brand">
        Title
      </h1>
      <p class="primary-brand">
        Eam ex scaevola eloquentiam, ex possim torquatos per. Pro an mnesarchum assueverit. Aeque oportere rationibus ei has, unum case ut qui, eum ne hinc eligendi. Nam no harum omnium, id nominavi comprehensam pri.
      </p>

      <form>
        <div class="container">
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="name-input">Name</label>
                <input type="text" class="form-control form-control-lg" id="name-input" aria-describedby="nameHelp">
              </div>
              <div class="form-group">
                <label for="email-input">E-mail</label>
                <input type="email" class="form-control form-control-lg" id="email-input" aria-describedby="emailHelp">
              </div>
              <div class="form-group">
                <label for="phone-input">Phone number</label>
                <input type="tel" class="form-control form-control-lg" id="phone-input" aria-describedby="phoneHelp">
              </div>
            </div>
            <div class="col">
              <div class="h-100">
                <label for="description-input">How can we help you?</label>
                <textarea class="form-control form-control-lg h-100" id="description-input"></textarea>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

  </div>
</section>

The columns (col) will be the same height since Bootstrap 4 uses flexbox.

Why can't this textarea assume the full height of its parent in Chrome?

* {  box-sizing: border-box;}
html, body {  height: 100%;  margin: 0;}
.outer {  background-color: #eee;  display: flex;  flex-direction: column;  height: 100%;  padding: 10px;}
.expand {  flex: 1;}
textarea {  height: 100%;  width: 100%;}

<div class="outer">  <p>    Nice little wall of text.  </p>  <div class="expand">    <textarea></textarea>  </div></div>

Make textarea fill table cell

You can make it work by adding position: relative to the td, and position: absolute to the textarea.

This is the fiddle:
https://jsfiddle.net/stefarossi/5Lwhg7mb/2/

Hope you can find this useful.

---

Related Topics