html - 当我调整它的大小时，如何让我的可调整大小的文本区域不离开我的容器？

Question

.ctnb{
     background: black;
     opacity: 0.4;
     width: 665px;
     border-radius: 4px;
     margin-left: 0px; 
     margin-top: 30px;
     height: 220px;
      }
 .surb textarea{
    margin-top: -12px;
    width: 566px;
    height: 105px;
    box-sizing: border-box;
    border: none;
    outline-color: black;
    padding-right: 10px;
    padding-left: 11px;
    font-size: 18px;
    padding-top: 9px;
    border-radius: 2px;
    min-height: 105px;
    resize: vertical;
    position: inherit;
     }
.subme button{
    padding: 13px 254px;
    background-color: green;
    margin-left: 52px;
    border-radius: 2px;
    color: white;
    font-size: 16px;
}
.surb textarea:placeholder-shown{
    font: menu;
    padding: 9px;
     }

<form>
    <div class="ctnb">
    <div class="surb">
        <p>Any comments or suggestions?</p>
        <textarea id="sub" name="comments" placeholder="Enter your comment here"></textarea>
    </div>
    <br>
    <div class="subme">
        <button type="button">Submit</button>
    </div>
    </div>

textarea 在容器内部的最小高度处，但每当我调整它的大小时，它往往会延伸到容器外部。我试过给容器一个固定的位置，但它仍然不起作用。

标签： html