在Flexbox上下文中处理TextArea自动高度

Question

我知道现有的主题已经发布在textarea的auto-height主题上，使用this.height = this.scrollHeight技术或使用contenteditable元素。

我选择了满足的方式，对我来说似乎更清洁...... “原样”使用时效果很好，但在flexbox容器中完全失败。

我尝试使用max-height和min-height处理一些解决方案，但没有成功......

问题是当在“textarea”中添加一个新行时，文本溢出到外面...当我希望textarea自动“推”其上限（而不是向下！） 压制新行时出现同样的问题，尝试我没有更新元素的高度。

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>

仅限CSS的解决方案是理想的，但我没有找到任何方法让Chrome，Firefox和Edge（最新版本）感到高兴......

更新
我终于找到了我错过的东西：
班级tchat-footer缺少flex: 1 0 auto，
并且min-height .autoExpand附带Private Sub Worksheet_Change(ByVal Target As Range) '' Choose any one of these three range methods ' By Individual Cell If Replace(Target.Address, "$", "") = "A1" Then GoTo validate ' Change this to your cell range '' By Any Cell in Column 1 'If Target.Column = 1 Then GoTo validate ' Change this to your Column '' By Any Cell in Column 1 'If Target.Row = 10 Then GoTo validate ' Change this to your Row Exit Sub validate: If Len(Target) <> 6 Then GoTo errorMsg For i = 1 To 6 abc = Asc(Mid(Target, i, 1)) If i Mod 2 = 0 Then If Asc(Mid(Target, i, 1)) < 48 Or Asc(Mid(Target, i, 1)) > 57 Then GoTo errorMsg End If If i Mod 2 <> 0 And Asc(Mid(Target, i, 1)) > 49 And Asc(Mid(Target, i, 1)) < 58 Then GoTo errorMsg Next i Exit Sub errorMsg: Target.Interior.ColorIndex = 3 MsgBox "Incorrect Format for this cell" Application.EnableEvents = False Target = "" Target.ClearFormats Application.EnableEvents = True End Sub FIXED codepen

Answer 1

我认为这会对你有所帮助：

// 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>