Ehsan Ehsan - 11 days ago 5
CSS Question

How to set fit-content for width in right side - dynamic content width

How to set fit-content for width in right side. I used

fit-content
value for width and every things Okay in left side, but in right side content put in center of page. I use this CSS for make dynamic width by content:

.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;
}


It's my chat example:
CodePen Example

Answer

Replace with my give code.

.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;
}

and:

.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

Comments