텍스트 영역이 부모 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.

주의 크롬, 파이어 폭스와 사파리의 기본이라고 both.

당신은 텍스트 영역 요소의 폭과 높이를 제한하려는 경우, 그것은 문제가되지 않습니다 :이 브라우저는 또한 존중 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>

난 당신이 내가하는 것과 같은 문제가있는 바라고 있었다 나의 문제는 간단했다 ... : 컨테이너 내부의 고정 비율과 고정 된 텍스트 영역을 확인합니다 (I 나와 함께 곰 때문에, 경우, CSS / JS / HTML에 새로운 해요 I 올바른 용어를 사용하지 마십시오) 표시되는 장치에 관계없이 컨테이너를 채우는 상자 (테이블 셀)가 올바른 공간을 차지하도록합니다. 해결 방법은 다음과 같습니다.

<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는 여기서 덜 들여 쓰기됩니다.

그런 다음 (여기에 표시된 것처럼) 어떤 장치 화면을 사용하든 디스플레이에 완벽하게 작동하는 것을 찾을 때까지 백분율을 매우 구체적으로 조정했습니다.

물론, "resize : none;" 과도하지만 후회하는 것보다 더 안전하며 이제 소비자는 상자 크기를 조정할 필요가 없으며 어떤 장치에서 보는지도 중요하지 않습니다.

잘 작동합니다.

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

텍스트 영역에 필요한 너비와 높이를 지정한 다음 사용하십시오. 크기 조정 : 없음; textarea의 stretchable 속성을 비활성화하는 css 속성.