css,_下面代码，flex自适应布局，但是图片宽度变窄了而不是文字的宽度变窄，我测试过是文字影响了导致没法自适应，为什么，应该怎么改？，css

下面代码，flex自适应布局，但是图片宽度变窄了而不是文字的宽度变窄，我测试过是文字影响了导致没法自适应，为什么，应该怎么改？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       body{margin:0px;}
       .container{
                    display:flex;
                    width:170px;
                 }
       .image{
                 /*float:left;*/
                 height:100px;
                 width:100px;
                  margin-right:15px;
                 }
       .news{
                /*float:left;*/
                flex-grow:1; 
                /*flex-shrink:7;*/
                /*width:170px;*/
                height:100px;
                line-height:25px;
                font-family:"宋体";
                overflow:hidden;
                }
       .title{
                 text-overflow:ellipsis;
                 overflow:hidden;
                 white-space:nowrap;
                 font-weight:bold;
                 font-size:16px;
              }
       .paragraph{font-size:14px;
                     color:#666;                
                 }
    </style>
</head>
<body>
<div class="container">
    <img class="image" src="http://163.com/x.jpg ">
    <div class="news">
        <div class="title">标题文字标题文字标题文字标题文字</div>
        <div class="paragraph">段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</div>
    </div>
</div>
</body>
</html>