pre标签文字布局保留原格式自适应不超出父级元素

某个业务场景中，我需要把用户输入的原始的内容结构展示出来，且要兼容展示页的容器自适应

代码

输入的时候，使用textArea标签收集用户输入的数据(不关心他怎么换行，多少空格，多少缩进，统统不关心，他输入什么，我数据库就存什么)
展示

.container{
	width: 678px;
    margin: 4px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 3px;
    padding: 10px 6px;
    overflow-y: auto;// 垂直方向 使用滚动条来兼容高度
}
.container pre{
	white-space: pre-wrap; 
    word-wrap: break-word; 
    // 水平方向 换行来兼容宽度,内容错位的话，会自动换行的。(顶多就是有点儿不好看，但是输入的时候应该限制一下)
}

// html 代码
<div class='container'>
	<pre> 数据库存的值 </pre>
</div>