Почему эта текстовая область не может принимать полную высоту своего родителя в Chrome?

Рассмотрим следующую страницу, на которой отображается строка текста с <textarea> под ней.

* {
  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>

Ответ 1

* {
  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>

Ответ 2

Ваш .expand div действительно работает по назначению. Он занимает оставшуюся высоту родителя.

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.outer {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border: 2px dashed red;
}

.expand {
  flex-grow: 1;
  border: 2px dashed blue;
}

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

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

Ответ 3

Попробуйте изменить это:

.expand {
  flex-grow: 1;
}

.expand {
  flex: 1;
}