Текстовый элемент не расширяется на 100% его ширины

Question

Я изучаю Angular JS 8 в процессе, когда я занимался реализацией библиотеки угловых материалов. Я обнаружил, что элемент Textarea не расширяется до 100% ширины

Возможно, это проблема Бросвера, но я не нашел такой же экран в браузере Firefox.

Пробовал также использовать Boxsizing, но ничего не помогло.

mat-card {
  width: 80%;
  margin: auto;
}

textarea {
  width: 100%;
  -webkit-box-sizing: border-box;
  /* <=iOS4, <= Android  2.3 */
  -moz-box-sizing: border-box;
  /* FF1+ */
  box-sizing: border-box;
  /* Chrome, IE8, Opera, Safari 5.1*/
}

<mat-card>
  <mat-form-field>
    <textarea matInput rows='6' [(ngModel)]="enteredValue"> 
      </textarea>
  </mat-form-field>
  <br>
  <button mat-raised-button color="primary" (click)="onAddPost()">Save Post</button>
</mat-card>

<p>{{ newPost }}</p>

https://drive.google.com/file/d/1Eyckr_JffJdMRnOtR2dFHI3scx9qDATN/view?usp=sharing

Пожалуйста, найдите изображение выше, которое показывает, как я хочу, чтобы моя текстовая область расширялась

Answer 1

Согласно вашему примеру, используйте стиль поля mat-form-field вместо text-area

mat-form-field{
  width: 100%;
}

Я бы предпочел поместить оболочку со стилем display: flex; flex-direction: column; ;, если есть несколько полей формы

<mat-card>
  <section class="form-container">
    <mat-form-field>
      <textarea matInput rows='6' [(ngModel)]="enteredValue"></textarea>
    </mat-form-field>
  </section>
</mat-card>

.form-container{
  display: flex;
  flex-direction: column;
}

Answer 2

Попробуйте указать width: 100% для mat-form-field, который является родительским элементом для textarea.

<mat-card>
  <mat-form-field style="width: 100%">
      <textarea matInput rows = '6' [(ngModel)] = "enteredValue"> 
  </textarea>
  </mat-form-field>
   <br>
   <button
  mat-raised-button
  color ="primary"
 (click)="onAddPost()">Save Post</button>
</mat-card>

<p>{{ newPost }}</p>