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

user_193619 0
Viewed 3628

Consider the following page, which displays a line of text with a <textarea> underneath it.

* {
  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-grow: 1;
}

textarea {
  height: 100%;
  width: 100%;
}
<div class="outer">
  <p>
    Nice little wall of text.
  </p>
  <div class="expand">
    <textarea></textarea>
  </div>
</div>

The intended behavior is to have the textarea occupy the remaining height of the page underneath the line of text. Using flexbox, I can make the .expand element occupy the remaining height of the page. However, despite having height: 100%; set on the textarea it refuses to occupy the full height of its parent.

Why isn't this working and how can I make the textarea fill its parent?

flexbox google-chrome textarea css
4 Answers

CSS has a concept of block width/height as "definite" or "indefinite"; essentially .

Percentages need to have a definite length to resolve against, and Chrome doesn't consider flex items definite in this case, contrary to the current spec.

There are two easy fixes here: either set flex-basis to a <length> (when it's the only flex item that can grow, it doesn't actually matter what length this is, it just can't be the other values of none or auto, so flex-basis: 0 works fine), or give it a definite height (and it similarly doesn't matter, so height: 0 works fine).

Alternatively, you can make .expand itself a flexbox with the textarea child expanding to fill the parent as one of the other answers suggests.

user_4781760
Related