Как заставить cols = "" работать, когда текстовая область находится в сеточном контейнере

Question

Почему-то и Chrome, и Firefox, похоже, не уважают атрибут cols для textarea элементов, когда они находятся в сеточном контейнере:

.grid { display: grid; }

textarea:not([cols]) { width: 100%; }

<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

Атрибут rows соблюдается, как я и ожидал.

Мне нужен texarea, который учитывает cols, когда внутри контейнера сетки, и если cols отсутствует, занимает 100% доступной ширины.

Answer 1

Вам нужно взять одного родительского элемента блока, чтобы исправить это.

.grid {
  display: grid;
}

textarea:not([cols]) {
  width: 100%;
}

<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <div>
    <textarea cols="10" rows="10">some dummy text</textarea>
  </div>
  <textarea>some other text</textarea>
</div>

Answer 2

Это проблема выравнивания, из-за которой текстовая область по умолчанию растягивается.Вы можете исправить это, используя поле auto справа

.grid { display: grid; }

textarea:not([cols]) { width: 100%; }

textarea {
  margin-right:auto;
}

<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>