css - teclado - text-overflow ellipsis multiline

¿Por qué este área de texto no puede asumir la altura máxima de su elemento principal en Chrome?

Question

Considere la siguiente página, que muestra una línea de texto con un <textarea> debajo de ella.

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

El comportamiento previsto es hacer que el área de texto ocupe el alto restante de la página debajo de la línea de texto. Usando flexbox, puedo hacer que el elemento .expand ocupe el alto restante de la página. Sin embargo, a pesar de tener height: 100%; establecer en el área de texto se niega a ocupar la altura completa de su principal.

¿Por qué esto no funciona y cómo puedo hacer que el área de texto ocupe su área principal?

Answer 1

Intenta cambiar esto:

.expand {
  flex-grow: 1;
}

a

.expand {
  flex: 1;
}

Answer 2

Su div .expand realidad funciona como se .expand . Ocupa la altura restante del padre.

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

Sin embargo, el área de textarea es un elemento secundario de .expand y lo has configurado a la height: 100% .

Como las alturas porcentuales normalmente se basan en la altura especificada del elemento principal y no hay una height definida en .expand , la altura del área de textarea computa en auto (explicaciones más completas aquí y aquí ).

La solución más simple y eficiente es deshacerse del porcentaje de altura en el área de textarea y darle a la display: flex principal display: flex , que aplica automáticamente align-items: stretch al niño.

* {
  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;
  display: flex;
}

textarea {
  width: 100%;
}

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

Answer 3

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

.expand {
  flex: 1;
}