Jak mogę zapobiec rozciągnięciu się obszaru textarea poza jego macierzysty element DIV? (tylko problem z Google Chrome)

Jak mogę zapobiec rozciągnięciu się obszaru textarea poza jego nadrzędny element DIV?

Mam ten obszar tekstowy wewnątrz tabeli, która jest wewnątrz DIV i wydaje się, że powoduje to, że cała tabela wyciąga się poza jej granice.

Możesz zobaczyć przykład tej samej sytuacji, nawet w prostszym przypadku, po prostu umieszczając obszar tekstowy wewnątrz elementu div (tak jak w przypadku www.stackoverflow.com)

Na poniższych obrazkach widać, że obszar tekstu może rozciągać się poza rozmiar swojego rodzica? Jak temu zapobiec?

Jestem trochę nowy w CSS, więc tak naprawdę nie wiem, jakich atrybutów CSS powinienem używać. Próbowałem kilku, takich jak wyświetlacz i przepełnienie . Ale wydaje się, że nie działają. Coś jeszcze mogłem przegapić?

AKTUALIZACJA: HTML

CSS

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

Jeśli umieścisz ten kod wewnątrz http://jsfiddle.net , zobaczysz, że działają one inaczej. Chociaż obszar tekstowy jest ograniczony do wartości procentowej zadeklarowanej w jego stylu css, nadal można go zmusić, aby sprawił, że jego tabela nadrzędna była tak duża, jak chce, a następnie widać, że rozlewa się poza obramowanie nadrzędne. Jakieś przemyślenia, jak to naprawić? Wcześniejsze

Aby całkowicie wyłączyć zmianę rozmiaru:

textarea {
    resize: none;
}

Aby zezwolić tylko na zmianę rozmiaru w pionie:

textarea {
    resize: vertical;
}

Aby zezwolić tylko na zmianę rozmiaru w poziomie:

textarea {
    resize: horizontal;
}

Lub możesz ograniczyć rozmiar:

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

Aby ograniczyć rozmiar do szerokości i / lub wysokości rodziców:

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

Kontrolka zmiany rozmiaru Textarea jest dostępna za pośrednictwem właściwości resize CSS3 :

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

Dopuszczalne wartości są oczywiste: none(wyłącza zmianę rozmiaru obszaru tekstu) both, verticali horizontal.

Zwróć uwagę, że w przeglądarkach Chrome, Firefox i Safari wartością domyślną jest both.

Jeśli chcesz ograniczyć szerokość i wysokość elementu textarea, że nie jest to problem: te przeglądarek również przestrzegać max-height, max-width, min-heightoraz min-widthwłaściwości CSS w celu zapewnienia zmiany rozmiaru w określonych proporcjach.

Przykład kodu :

#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>

Mam nadzieję, że masz ten sam problem, że ja miałem ... mój problem był prosty: Zrób stałą textarea z zablokowanymi procentach wewnątrz pojemnika (jestem nowy w CSS / JS / HTML, więc pokrywa się ze mną, gdybym nie zrozumcie poprawnego żargonu), aby bez względu na urządzenie, na którym się wyświetla, pudełko wypełniające pojemnik (komórka stołu) zajmowało odpowiednią ilość miejsca. Oto jak to rozwiązałem:

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

Wtedy CSS wygląda tak ...

#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;
}

Przepraszam za niechlujny blok kodu, ale musiałem ci pokazać, co jest ważne i nie wiem, jak wstawić cytowany kod CSS na tej stronie. W każdym razie, aby upewnić się, że wiesz, o czym mówię, ważne CSS jest tutaj mniej wcięte ...

To, co wtedy zrobiłem (jak pokazano tutaj), to bardzo precyzyjne dostosowanie wartości procentowych, aż znalazłem te, które działały idealnie, aby dopasować wyświetlacz, bez względu na używany ekran urządzenia.

To prawda, myślę, że „zmień rozmiar: brak”; to przesada, ale lepiej bezpieczne niż przykro, a teraz konsumenci i tak nie będą musieli zmieniać rozmiaru pudełka ani nie będzie miało znaczenia, z jakiego urządzenia go oglądają.

Działa świetnie.

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

przypisz wymaganą szerokość i wysokość do obszaru tekstu, a następnie użyj. resize: none; css, która wyłącza rozciągliwą właściwość textarea.