Html 滚动显示css文本区域上方

我创建了一个固定大小的

，允许用户在其中滚动。问题在于，出于某种原因，滚动显示在边缘的上方而不是下方和内部

textarea{
宽度：40%；
最小宽度：40%；
最大宽度：40%；
最小高度：120px；
最大高度：120px；
填充：10px；
调整大小：无；
显示：内联块；
大纲：无；
框大小：边框框；
边框：实心5px透明；
边界半径：30px；
背景图像：线性渐变（白色，白色），径向渐变（右上角的圆圈，#006699，#9900CC）；
背景来源：边框框；
背景剪辑：填充框、边框框；
字体系列：“Roboto”，无衬线；
字体大小：15px；
}

---

Lorem ipsum door sit amet，一位杰出的领导者。佩伦特斯·莫里斯·维尼那提斯·尤伊斯莫·奥迪奥·维尼那提斯·诺恩。在普尔文纳尔广场上，他坐在阿梅特广场上。请不要在弗林斯里拉一级做临时性的小动作。我是一个普通人，我是一个普通人。mollis Vivamus non arcu nec bibendum。菲舍勒斯·波苏尔·维韦拉侵权人。奥勒姆麦格纳的埃蒂亚姆。努克·佩伦茨克·拉库斯在自由乌拉姆科珀，一位名叫马莱苏达·奥古斯的秃鹫。但是，生命是不可能的，因为它是一个赌注。艾库利斯拍卖行的Donec egestas enim。前庭是自由的元素。Vivamus eget elementum leo.

如何为您的

文本区域使用一个容器并对其应用边框


.textarea容器{
宽度：250px；
高度：300px；
背景图像：线性渐变（白色，白色），径向渐变（右上角的圆圈，#006699，#9900cc）；
背景来源：边框框；
背景剪辑：填充框、边框框；
边框：实心5px透明；
边界半径：30px；
填充：0；
溢出：隐藏；
}
文本区{
宽度：100%；
身高：100%；
填充：10px；
调整大小：无；
显示：内联块；
大纲：无；
边界：无；
框大小：边框框；
字体系列：“Roboto”，无衬线；
字体大小：15px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。佩伦特斯·莫里斯·维尼那提斯·尤伊斯莫·奥迪奥·维尼那提斯·诺恩。在普尔文纳尔广场上，他坐在阿梅特广场上。请不要在弗林斯里拉一级做临时性的小动作。我是一个普通人，我是一个普通人。mollis Vivamus non arcu nec bibendum。菲舍勒斯·波苏尔·维韦拉侵权人。奥勒姆麦格纳的埃蒂亚姆。努克·佩伦茨克·拉库斯在自由乌拉姆科珀，一位名叫马莱苏达·奥古斯的秃鹫。但是，生命是不可能的，因为它是一个赌注。艾库利斯拍卖行的Donec egestas enim。前庭是自由的元素。我们的生活是平等的，我们的生活是平等的。佩伦特斯·莫里斯·维尼那提斯·尤伊斯莫·奥迪奥·维尼那提斯·诺恩。在普尔文纳尔广场上，他坐在阿梅特广场上。请不要在弗林斯里拉一级做临时性的小动作。我是一个普通人，我是一个普通人。mollis Vivamus non arcu nec bibendum。菲舍勒斯·波苏尔·维韦拉侵权人。奥勒姆麦格纳的埃蒂亚姆。努克·佩伦茨克·拉库斯在自由乌拉姆科珀，一位名叫马莱苏达·奥古斯的秃鹫。但是，生命是不可能的，因为它是一个赌注。艾库利斯拍卖行的Donec egestas enim。前庭是自由的元素。利奥元素万岁。
只需将文本区域包装在
div中，并在div中添加一些样式。同时从文本区域中删除
行
属性。要查看结果，请在此处查看我的链接

div {
      border: solid 5px transparent;
      border-radius: 30px;
      width: 40%; 
      min-width: 40%;
      max-width: 40%;
      height:120px;
      box-sizing: border-box;
      max-height:120px;
      background: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
      background-origin: border-box;
      background-clip: padding-box, border-box;
  overflow:hidden;
}

textarea {
    height:100%;
    width:100%;
    padding:10px;
    resize: none;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    border:none;
}

我认为唯一的解决方案是将textarea包装在容器中，并在容器上应用样式：

div{
宽度：40%；
最小高度：120px；
最大高度：120px；
填充：20px；
显示：内联块；
大纲：无；
框大小：边框框；
边框：实心5px透明；
边界半径：30px；
背景图像：线性渐变（白色，白色），径向渐变（右上角的圆圈，#006699，#9900CC）；
背景来源：边框框；
背景剪辑：填充框、边框框；
字体系列：“Roboto”，无衬线；
字体大小：15px；
显示：内联flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
位置：绝对位置；
}
文本区{
位置：相对位置；
弹性：10自动；
利润率：-20px；
填充：20px；
宽度：100%；
调整大小：无；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。佩伦特斯·莫里斯·维尼那提斯·尤伊斯莫·奥迪奥·维尼那提斯·诺恩。在普尔文纳尔广场上，他坐在阿梅特广场上。请不要在弗林斯里拉一级做临时性的小动作。我是一个普通人，我是一个普通人。mollis Vivamus non arcu nec bibendum。菲舍勒斯·波苏尔·维韦拉侵权人。奥勒姆麦格纳的埃蒂亚姆。努克·佩伦茨克·拉库斯在自由乌拉姆科珀，一位名叫马莱苏达·奥古斯的秃鹫。但是，生命是不可能的，因为它是一个赌注。艾库利斯拍卖行的Donec egestas enim。前庭是自由的元素。利奥元素万岁。
最初的from最接近于解决问题，然后就解决了。来自中国的援助也起到了作用。答案中的一些CSS是关闭的，因为您遇到了
与其容器高度不一致的问题。下面是我为将来遇到这个问题并希望看到最终方法的人确定的CSS。我接受了M.A Shahbazi的答案，因为这是最接近的答案，只需要几次调整。主要是实际尺寸，它们都需要相同的尺寸才能匹配。看起来更像这样：
除此之外：


.textarea容器{
宽度：100%；
最小宽度：100%；
最大宽度：100%；
最小高度：200px；
最大高度：200px；
边缘底部：10px；
背景图像：线性渐变（白色，白色），径向渐变（右上角的圆圈，#006699，#9900cc）；
背景来源：边框框；
背景剪辑：填充框、边框框；
边框：实心5px透明；
边界半径：30px；
填充：0；
溢出：隐藏；
}
文本区{
宽度：100%；
最小宽度：100%；
div {
      border: solid 5px transparent;
      border-radius: 30px;
      width: 40%; 
      min-width: 40%;
      max-width: 40%;
      height:120px;
      box-sizing: border-box;
      max-height:120px;
      background: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
      background-origin: border-box;
      background-clip: padding-box, border-box;
  overflow:hidden;
}

textarea {
    height:100%;
    width:100%;
    padding:10px;
    resize: none;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    border:none;
}