Textarea is too small for the container. Can't even manually enlarge it

Question

I have a Problem with a textarea in some div-blocks. It just will not accept the full width of the block, no matter what I do. I tried giving it a fixed 100% width, I tried giving it many more cols, I tried increasing the size manually in the browser, it just will not fill the complete container and I don't get why. It acts, as if there is an invisible col on the right of it, but there isn't.

**Note:**The text part (testwethsfjg.....) before the textarea is just to see if the text would be bound on the same boundaries as the textarea.

Maybe someone got an idea of what the problem could be. Help would be appreciated.

CODE

    .comment-box {
      padding-top: 20px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 20px;
      margin-left: 200px;
      margin-right: 200px;
      background-color: #e9dac6;
      border-radius: 25px;
      border: 3px solid green;
    }
    .comment-box-empty {
      margin-bottom: 20px;
      background-color: white;
      border-radius: 25px;
      border: 1px solid black;
    }
    .comment-box-full {
      margin-top: 20px;
      margin-bottom: 0px;
      margin-left: 30px;
      margin-right: 30px;
      background-color: white;
      border-radius: 25px;
      border: 1px solid black;
    }
    .comment-box-top {
      margin: auto;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #faebd7;
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
      border: none;
      width: 100%;
      height: 100%;
    }
    .comment-box-top-text {
      font-size: 19px;
      font-weight: bold;
      line-height: 1;
      width: auto;
      height: auto;
      display: inline;
    }
    .comment-box-content {
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
      border: none;
      width: 100%;
    }
    .comment-box-content-text {
      text-align: justify;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.25;
    }

<div class="comment-box">
  <div class="comment-box-empty">
    <form id="usr_comment">
      <div class="comment-box-top">
        <div class="comment-box-top-text">
          <label for="name">Name:</label>
          <input type="text" size="10" name="name" />
          <label for="email">Email:</label>
          <input type="email" size="15" name="email" />
          <br />
          <input type="checkbox" name="show_mail" value="showmail" checked />
          <label for="show_mail">E-Mail für alle Sichtbar anzeigen?</label>
          <br />
        </div>
      </div>
      <div class="comment-box-content">
        testwethsfjggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        <br />
        <textarea></textarea>
        <br />
        <br />
        <button type="submit" class="btn btn-primary btn-sm">Post</button>
      </div>
    </form>
  </div>

  @{ foreach (var comment in ViewBag.rb1.CommentList) { if (ViewBag.rb1count > 0) {
  <div class="comment-box-full">
    <div class="comment-box-top">
      <div class="comment-box-top-text">
        @comment.Name @comment.Email
      </div>
    </div>
    <div class="comment-box-content">
      <div class="comment-box-content-text">
        @comment.Content
      </div>
    </div>
  </div>
  } } }
</div>

Screenshot of max width of textarea

Answer 1

you need to give width:100% to textarea, and if not yet, reset margin/padding, and to stop re-sizing the width I could use resize:none or resize:vertical depending on your case

here is a sample:

div {
  width: 500px;
  border: red solid;
  box-sizing: border-box;
  padding: 5px;
}
textarea {
  width: 100%;
  margin: 0;
  padding: 0;
  resize:vertical
}

<div>
  <textarea></textarea>
</div>

Answer 2

Actually you can set the width to your textarea, but once the user changes it manually, the css won't work anymore, so you can add a resize:none to ensure the width of the textarea

textarea {
  resize: none;
  width: 90%;
}