Gestion de TextArea auto-height dans Flexbox Contexte

Question

Je suis conscient que des rubriques existantes sont déjà publiées sur le sujet de la hauteur automatique pour textarea, en utilisant la technique this.height = this.scrollHeight ou en utilisant un élément contenteditable.

J'ai choisi le moyen contented, m'a semblé plus propre ... fonctionne parfaitement lorsqu'il est utilisé "tel quel", mais échoue totalement dans les conteneurs flexbox.

J'ai essayé de travailler sur une solution en utilisant max-height et min-height un peu partout sans succès ...

Le problème est lors de l'ajout d'une nouvelle ligne à l'intérieur du « textarea », le texte déborde en dehors ... quand je veux la zone de texte pour "pousser" automatiquement sa limite supérieure (pas en bas!) Même problème lors de la suppression d'une nouvelle ligne, les tentatives que j'ai faites n'ont pas mis à jour la hauteur de l'élément.

FULL code on Codepen

CSS

html, body { height: 100%; } 
body { 
    background: lightgrey; 
    display: flex; 
    flex-direction: column; 
} 

*:focus { outline: 0; } 

.app-title { 
    background: cornflowerblue; 
    padding: 20px; 
} 

.tchat-container { 
    width: 300px; 
    padding: 20px 0 20px 20px; 
    margin: 30px auto; 
    background-color: white; 
    display: flex; 
    flex-direction: column; 
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); 
} 

section { 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

article { 
    background: #FDD835; 
    border-radius: 6px; 
    padding: 5px; 
    margin: 5px; 
} 

.tchat-footer { 
    display: flex; 
    padding-right: 20px; 
    margin-top: 20px; 
    border: 1px dashed; 
} 

.autoExpand { 
    flex: 1; 
    margin: 0; 
    background-color: white; 
    border: 1px solid lightgrey; 

    padding: 10px; 
    border-radius: 6px; 
} 

.autoExpand:focus { 
    border-color: cornflowerblue; 
} 

button { 
    height: 60px; 
    width: 60px; 
    border-radius: 50%; 
    margin-left: 20px; 
    border: none; 
} 

.app-footer { 
    padding: 20px; 
    text-align: center; 
    background: black; 
    opacity: 0.8; 
    color: white; 
} 

HTML

<header class='app-title'>APP TITLE</header> 
<div class='tchat-container'> 
    <header>Title</header> 
    <section> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    <article>Something very long to test content wrapping and overflow...</article> 
    </section> 
    <footer class='tchat-footer'> 
    <p contenteditable='true' class='autoExpand' placeholder='Auto-Expanding Textarea'></p> 
    <button>Send</button> 
    </footer> 
</div> 
<footer class='app-footer'>APP FOOTER</footer> 

une solution CSS ne serait idéal, mais je didno t trouver un moyen de rendre Chrome, Firefox et Edge (dernières versions) heureux ...

MISE À JOUR
j'ai finalement trouvé ce que j'ai raté:
la classe tchat-footer étaient portés disparus flex: 1 0 auto,
et accessoirement un min-height pour .autoExpand.
FIXED codepen

Answer 1

Je pense que cela vous aidera:

// Applied globally on all textareas with the "autoExpand" class 
 
    const autoExpandingTextAreas = document.querySelectorAll('.autoExpand') 
 

 
    for (let aeta of autoExpandingTextAreas) { 
 
    aeta.addEventListener('input', event => { 
 
     console.log(
 
      'height', event.currentTarget.style.height, 
 
      '\nscrollHeight', event.currentTarget.scrollHeight 
 
     ) 
 
     // event.currentTarget.style.height = event.currentTarget.scrollHeight + 'px' 
 
    }) 
 
    }

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background: lightgrey; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
} 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
*:focus { 
 
    outline: 0; 
 
} 
 

 
.app-title { 
 
    background: cornflowerblue; 
 
    padding: 20px; 
 
} 
 

 
.tchat-container { 
 
    --tchat-container-width: 300px; 
 
    --tchat-container-padding: 20px; 
 
    width: var(--tchat-container-width); 
 
    padding: var(--tchat-container-padding); 
 
    padding-right: 0; 
 
    margin: 30px auto; 
 
    background-color: white; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); 
 
    height: calc(100vh - 188px); 
 
} 
 

 
section { 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
article { 
 
    background: #FDD835; 
 
    border-radius: 6px; 
 
    padding: 5px; 
 
    margin: 5px; 
 
} 
 

 
.tchat-footer { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    margin-top: 20px; 
 
} 
 

 
.autoExpand { 
 
    -webkit-box-flex: 1; 
 
     -ms-flex: 1; 
 
      flex: 1; 
 
    background-color: white; 
 
    border: 1px solid lightgrey; 
 
    padding: 5px 10px; 
 
    border-radius: 6px; 
 
    width: 75%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.autoExpand:focus { 
 
    border-color: cornflowerblue; 
 
} 
 

 
.buttons-container { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
} 
 

 
button { 
 
    height: 40px; 
 
    width: 40px; 
 
    border-radius: 50%; 
 
    font-size: 12px; 
 
    border: none; 
 
} 
 

 
.app-footer { 
 
    padding: 20px; 
 
    text-align: center; 
 
    background: black; 
 
    opacity: 0.8; 
 
    color: white; 
 
}

<header class='app-title'>APP TITLE</header> 
 
    <div class='tchat-container'> 
 
    <header>Title</header> 
 
    <section> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
     <article>Something very long to test content wrapping and overflow...</article> 
 
    </section> 
 
    <footer class='tchat-footer'> 
 
     <p contenteditable='true' class='autoExpand' placeholder='Auto-Expanding Textarea'></p> 
 
     <button>Send</button> 
 
    </footer> 
 
    </div> 
 
    <footer class='app-footer'>APP FOOTER</footer>