HTML、CSSは自動的に/コンテンツに合わせて幅を調整、サイズ変更

Question

私は、次のような構造を持ついくつかのHTMLコンテンツがあります。

<div class="message-container"> 
    <p class="message-value">someVal</p> 
    <div class="message-attribute">someUsername</div> 
    <div class="message-attribute">11-09-2017 12:30</div> 
</div> 

だから、私はそれがmessage.valueとスケールで長い値を取得するときに私のメッセージ・コンテナ・アップを拡大したいが可能なかぎり最小幅に縮小します。

また、この小道具の最大幅を指定することもできません。

.message-container { 
    resize: both; 
    margin: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 2px; 
    color: #ffffff; 
    border-radius: 20px; 
    min-width: 100px; 
    max-width: 400px; 
    width: auto; 
    height: auto; 
    background-color: #80CBC4; 
} 

.message-value { 
    resize: both; 
    float: left; 
    max-width: 380px; 
    word-wrap: break-word; 
    height: auto; 
} 

.message-attribute { 
    padding-left: 50px; 
    width: 150px; 
    display: block; 
    color: #607D8B; 
} 

およびメッセージのユーザー名とメッセージ-日時が固定している幅：

私はこれをやりました。それはあなたがjsfiddle幅で見ることができるように

https://jsfiddle.net/Lwrpegqe/

を、それを削減するための空きスペースを持っているコンテンツ、それを次のように長すぎる場合でも

最後に、私は私のmessage-containerで最大幅を取得alswaysはよ自動的

Answer 1

解決策を参照してください。

.message-container { 
    resize: both; 
    margin: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 2px; 
    color: #ffffff; 
    border-radius: 20px; 
    min-width: 100px; 
    max-width: 400px; 
    width: auto; 
    height: auto; 
    background-color: #80CBC4; 
} 

.message-value { 
    resize: both; 
    float: left; 
    max-width: 380px; 
    word-wrap: break-word; 
    height: auto; 
    display: inline; 
} 

.message-attribute { 
    padding-left: 50px; 
    width: 150px; 
    display: inline; 
    color: #607D8B; 
} 

https://jsfiddle.net/Lwrpegqe/2/

Answer 2

をブロックのサイズを変更するには短い

主な目的は、パーセント（％）で、幅とhieghtを与えることができます。 あなたのために働くことを願っています。

. your-class{ 
widht:100%;height:100%;} 

Answer 3

表示：インラインブロック;〜.message-container

Inline elementsは、コンテンツの領域を占有します。 divは指定されていない限り常にblock elementです。