div内のテキストを展開するのではなく、

Question

注：div内に自動幅があり、そのまま使用したいと思います。 CSSを使って現在の（自動）幅に等しい最大幅を与える方法を何とか見つけたら問題は解決すると思うが、何も見つけられていない。

問題： ラインを破るべきで（背景、テキスト、メッセージが透明で表示されているdiv要素を無視する。）

所望の幅：

ここに私のCSSです：

div.chat div#chatOutput { 
    height: 370px; 
    margin-bottom: 5px; 
    max-height: 450px; 
    min-height: 130px; 
    border: 1px solid; 
    overflow-y: scroll; 
    padding: 5px; 
} 

そして、私のHTML：

<div class="chat"> 
      <h4><a title="Click to copy channel link" href="#">#</a> <span id="chatChannelName">General</span></h4> 
      <div id="chatOutput"></div> 
      <br /> 
      <div class="chat-group"> 
       <input type="text" maxlength="80" class="form-control" id="chatInput" placeholder="Type your message.." /> 
       <button class="btn btn-primary" id="chatSend"><i style="float: none;" class="fa fa-send"></i> Send</button> 
      </div> 
     </div> 

Answer 1

divを現在のdivの周りにもう一度追加して、それに一定の幅を与えてみてください。これにより、内側divが外側divより大きくならないようにする必要があります。ここで は一例です：

HTML：

<div class="fixed"> 
    <div class="autosize"> 
     <p>Hello World</p> 
    </div> 
</div> 

はCSS：

.fixed { 
    width: 400px; 
} 

.autosize { 
    /* Your own autosize-code */ 
} 

Answer 2

は、いくつかの属性overflow:

を試してみてください。
visible | hidden | scroll | auto | inherit