右側の幅のフィットコンテンツを設定する方法 - 動的コンテンツの幅

Question

右側の幅のフィットコンテンツを設定する方法私はfit-contentの幅とすべてのものの値を左側に入れましたが、右側の内容はページの中央に入れました。私は、コンテンツによってメイクダイナミックな幅のために、このCSSを使用します。

.chat li.right .chat-body { 
    margin-right: 60px; 
    border: 1px solid $c-grey; 
    padding: 10px; 
    background-color: whitesmoke; 
    border-color: #e3e3e3; 
    /*box-shadow: 0 1px 0 #cfcfcf;*/ 
    border-radius: 2px; 
    margin-left: 20%; 
    max-width: 80%; 
    width: fit-content; 
} 

それは私のチャット例です：私の所与のコードで置き換えます CodePen Example

Answer 1

。

.chat li.left .chat-body { 
    margin-left: 10px; 
    border: 1px solid #DDDDDD; 
    padding: 10px; 
    background-color: whitesmoke; 
    border-color: #e3e3e3; 
    /*box-shadow: 0 1px 0 #cfcfcf;*/ 
    border-radius: 2px; 
    /* margin-right: 20%; */ 
    max-width: 80%; 
    width: fit-content; 
    float: left; 
} 

.chat li.right .chat-body { 
    margin-right: 10px; 
    border: 1px solid #DDDDDD; 
    padding: 10px; 
    background-color: whitesmoke; 
    border-color: #e3e3e3; 
    /*box-shadow: 0 1px 0 #cfcfcf;*/ 
    border-radius: 2px; 
    /* margin-left: 20%; */ 
    max-width: 80%; 
    width: fit-content; 
    float: right; 
} 

と：

.chat li small.pull-left { 
    padding-left: 60px; 
    padding-top: 5px; 
    clear:both; 
} 
.chat li small.pull-right { 
    padding-right: 60px; 
    padding-top: 5px; 
    clear:both; 
} 

Working Demo