Як я можу запобігти поширенню текстової області за його батьківський елемент DIV? (лише випуск google-chrome)

Як я можу запобігти розтягуванню текстової області за межі батьківського елемента DIV?

У мене є цей текстовий простір всередині таблиці, яка знаходиться всередині DIV, і, здається, це призводить до того, що вся таблиця виходить за її межі.

Ви можете побачити приклад тієї ж ситуації навіть у більш простому випадку, просто помістивши текстову область всередину div (наприклад, що використовується тут на www.stackoverflow.com)

З малюнків нижче ви бачите, що текстова область може виходити за рамки батьківських розмірів? Як я можу запобігти цьому?

Я щось нове в CSS, тому я насправді не знаю, які атрибути CSS я повинен використовувати. Я спробував кілька, як дисплей і переповнення . Але вони, схоже, не роблять фокусу. Ще щось, що я міг пропустити?

ОНОВЛЕННЯ: HTML

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} ​

Якщо ви помістите цей код всередину http://jsfiddle.net , ви побачите, що вони діють інакше. Незважаючи на те, що текстове поле обмежується відсотком, заявленим у його стилі css, все ще можна змусити його призвести до того, що його батьківська таблиця буде такою великою, якою вона хоче бути, і тоді ви бачите, що вона переливається через батьківський кордон. Будь-які думки про те, як це виправити? Сігналы абмеркавання

Щоб повністю вимкнути зміну розміру:

textarea {
    resize: none;
}

Щоб дозволити лише вертикальний розмір:

textarea {
    resize: vertical;
}

Щоб дозволити лише горизонтальне змінення розміру:

textarea {
    resize: horizontal;
}

Або ви можете обмежити розмір:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

Щоб обмежити розмір шириною та / або висотою батьків:

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

Контроль розміру Textarea доступний через властивість зміни розміру CSS3 :

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

Допустимі значення самі по собі пояснюють: none(відключає зміну розміру тексту) both, verticalта horizontal.

Зверніть увагу, що в Chrome, Firefox та Safari типовим значенням є both.

Якщо ви хочете , щоб обмежити ширину і висоту елемента TEXTAREA, що це не проблема: ці браузери також поважати max-height, max-width, min-heightі min-widthвластивість CSS , щоб забезпечити зміну розміру в певних пропорціях.

Приклад коду :

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}

<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>

Я сподіваюся , що ви з тією ж проблемою , що я був ... мій питання була проста: зробити фіксоване текстове поле з заблокованими відсотками всередині контейнера (я новачок в CSS / JS / HTML, тому ведмідь зі мною, якщо я не отримуйте правильний жаргон), щоб незалежно від пристрою, на якому він відображається, поле, що заповнює контейнер (комірку таблиці), займало правильну кількість місця. Ось як я це вирішив:

<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

Тоді CSS виглядає так ...

#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family: "Helvetica", "Tahoma", "Verdana", "Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

Вибачте за недбалий блок коду тут, але мені довелося показати вам, що важливо, і я не знаю, як вставити цитований код CSS на цей веб-сайт. У будь-якому випадку, щоб ви зрозуміли, про що я говорю, важливий CSS тут менш вдавлений ...

То, що я тоді робив (як показано тут), дуже конкретно налаштовує відсотки, доки я не знайшов ті, які ідеально підходили для відображення, незалежно від того, який екран пристрою використовується.

Зрозуміло, я думаю, що "розмір: немає;" є надмірним, але краще безпечним, ніж вибачте, і тепер споживачам не доведеться змінювати розмір коробки, і не важливо, з якого пристрою вони переглядають його.

Це чудово працює.

textarea {
width: 700px;  
height: 100px;
resize: none; }

призначте необхідну ширину та висоту для текстової області, а потім використовуйте. змінити розмір: немає; css властивість, яка вимкне розтяжну властивість textarea.