How to prevent a TextArea that resizes from overflowing the page?

问题

I'm working to create a TextArea that is horizontally and vertically centered in the page. Given that I need the TextArea to be vertically centered, I can't have the textarea be 100w and 100h, I need it to start with a small height and then grow as the user types. I also need a click capturer so if the user clicks the area surrounding the textarea, the textarea focuses. (the gray bkg is just for debugging purposes)

I have a demo on CodePen here: https://codepen.io/anon/pen/OQbvxa

autosize(document.getElementById("note"));

$( ".textAreaClickCapturer" ).mouseup(function() {
  $( "#note" ).focus();
});

html, body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.page-body.fullScreen {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #EFEFEF;
  text-align: left;
  padding: 0!important;
  align-items: normal;
  justify-content: normal;
}

form {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

form .textAreaClickCapturer {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center
}

form .field {
  width: 100%;
  margin: 0;
  padding: 24px;
  clear: both;
  max-height: max-content;
  height: 100%;
  align-items: center;
}

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<div class="page-body fullScreen ">
  <form action="/">
    <div class="textAreaClickCapturer" role="presentation">
      <div class="field">
        <textarea id="note" placeholder="Say something..." rows="3"></textarea>
      </div>
    </div>
  </form>
</div>

When you type in multiple lines, the TextArea does grow nicely but eventually, the TextArea grows pasts the size of the screen causing it to break.

How can I get the TextArea are to grow where the TextArea doesn't go behind the page and break but has a working overflow to handle lots of text?

Desired Initial Experience

Broken UI, when the textarea grows past the surrounding div.

Thank you!

回答1:

The main reason is that when using align-items: center and/or justify-content: center, the element overflow its parent both at, in this case, top/bottom.

To solve that, one need to use auto margin's instead, and with that be able to control the alignment both vertical and horizontal, top/bottom, left/right, etc.

You also had a lot of height: 100% in your code (which I cleaned up), and combined with Flexbox, that cause more issues, so instead use Flexbox's own properties, e.g. here flex: 1 on flex column items, that will fill the parent's height.

Also added min-height: 0 so Firefox play along.

Updated codepen

Stack snippet

autosize(document.getElementById("note"));

$( ".textAreaClickCapturer" ).mouseup(function() {
  $( "#note" ).focus();
});

html,
body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.page-body.fullScreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #efefef;
  min-height: 0;
}

form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

form .textAreaClickCapturer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

form .field {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px;
}

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  padding: 0;
  width: 90%;
  text-align: center;
  overflow: auto;
  margin: auto;
}

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-body fullScreen ">
  <form action="/">
    <div class="textAreaClickCapturer" role="presentation">
      <div class="field">
        <textarea id="note" placeholder="Say something..." rows="3"></textarea>
      </div>
    </div>
  </form>
</div>

回答2:

I think you can use max-width and max-height:

textarea {
  ...
  max-width: 100%;
  max-height: 100%;
}

Update

I simplified both HTML and CSS, snippet:

autosize(document.getElementById("note"));
$(".textAreaClickCapturer").mouseup(function() {
  $("#note").focus();
});

html, body, form {
  height: 100%;
}

body {
  background: #efefef;
  margin: 0;
}

form {
  display: flex;
  align-items: center; /*center vertically*/
  padding: 24px;
  box-sizing: border-box;
}

textarea {
  font-size: 20px;
  text-align: center;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>

<form class="textAreaClickCapturer" action="/">
  <textarea id="note" placeholder="Say something..." rows="3"></textarea>
</form>

回答3:

I tried the following in your pen:

In the textarea selector in CSS, add:

max-height: 90%; overflow: auto;

This gives you a scrollbar if the content entered exceeds the max height, and the max-height is controlled by the containing div's size.

回答4:

Add a max height, like the others have said, me personally I prefer to use vh when relating to height in your situation. So in your pen it would just be:

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;
  max-height:50vh;
}

and you're squared away. Your vertical overflow is scrolling by default so there really isn't any more you have to do.

来源：https://stackoverflow.com/questions/48674300/how-to-prevent-a-textarea-that-resizes-from-overflowing-the-page

标签

javascript

css

html5

css3

flexbox