<div class="wrap">
   <header class="header">
      <h1>Public Chat Room #2</h1>
   </header>
   <main class="main">
      <div class="content">
         <h2>Chat Session</h2>
         <div class="owner">Owner says: <br>
            We want to have the Text message bubbles have a width that expands and shrinks to the width of the
            actual message plus 5px for padding. These DIVs also need to have max width that is 65%.
         </div>
         <div>Guest says: <br>
            Flexbox can do that too, similar to the way a float shrinks to fit it's content. Rather than using
            float left or right you would use margin-left: auto; and margin-right: auto; along with your max-width.
         </div>
         <div class="owner">Owner says: <br>
            Do you have the CSS code for making the chat UI Mobile friendly?
         </div>
         <div>Guest says: <br>
            It's included in the the CSS file for this page. Actually it's very minimal, the layout just changes
            to column direction and the sidebar goes to the top of the page.
         </div>
      </div>
      <div class="sidebar">
         <h2>Users In Room</h2>
         <p>User 1</p>
         <p>User 2</p>
         <p>User 3</p>
         <p>User 4</p>
         <p>User 5</p>
         <p>User 6</p>
      </div>
   </main>
   <footer class="footer">
      <form action="#" method="post">
         <div id="chat-panel">
            <textarea placeholder="Join the chat session" id="text"></textarea>
         </div>
         <div id="volume-panel" class="hide">
            <fieldset>
               <legend>Volume</legend>
               <label for="volumeOn">On</label>
               <input type="radio" id="volumeOn" name="volume" value="on">
               <br>
               <label for="volumeOff">Off</label>
               <input type="radio" id="volumeOff" name="volume" value="off">
            </fieldset>
         </div>
         <div class="controls">
            <button type="button" id="chat-toggle">Chat Panel</button>
            <button type="button" id="guest-send">Guest Send</button>
            <button type="button" id="owner-send">Owner Send</button>
            <button type="button" id="volume" title="Volume"></button>
         </div>
      </form>
   </footer>
</div>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	height: 100vh;
	overflow: hidden;
}
h1, h2 {
	font-size: 1.2em;
	margin: 0;
	text-align: center;
}
p {
	margin: .5em 0;
}
.wrap {
	height: 100%;
	height: calc(100vh - 6.5em);
	margin: 3em 0 0 0;
	overflow-y: scroll;
	background: #ccc;
}
.header, .footer {
	position: fixed;
	width: 100%;
	background: navy;
	color: #fff;
	text-align: center;
}
.header {
	height: 3em;
	line-height: 2.5;
	top: 0;
	left: 0;
}
.footer {
	height: 3.5em;
	bottom: 0;
	left: 0;
   padding: 0 40px;
}
/*------ Flexbox rules ------*/
.main {
	display: flex;
	flex-flow: row nowrap;
	background: #ccc;
	padding: .25em .25em 5.5em;
}
.content, .sidebar {
	display: flex;
	flex-flow: column nowrap;
	border: 1px solid #000;
	border-radius: 8px;
	padding: 5px;
	margin: 5px;
}
.content {
	flex: 1 1 60%;
}
.content div {
	max-width: 65%;
	margin: 6px auto 6px 4px;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 0 4px 4px #888;
	background: palegreen;
}
.content div.owner {
	margin: 6px 4px 6px auto;
	background: lightblue;
}
.content div::first-line {
	font-weight: 700;
}
.sidebar {
	flex: 1 1;
	min-width: 150px;
}
form {
   height: 100%;
}
#chat-panel {
	width: 80%;
	max-width: 700px;
	height: 5.5em;
	position: absolute;
	bottom: 3.5em;
	left: 0;
	right: 16px;
	margin: auto;
	padding: 4px;
	border: 1px solid navy;
	border-radius: 4px;
	background: #fff;
}
#chat-panel textarea {
	width: 100%;
	height: 100%;
}
#volume-panel {
	position: absolute;
	bottom: 3.5em;
	right: 20px;
	padding: 5px;
	border: 1px solid navy;
	border-radius: 4px;
	background: #fff;
	color: #000;
	text-align: left;
}
fieldset {
	margin: 0;
	padding: 5px
}
#volume-panel label {
	color: green;
	margin-left: 5px;
	vertical-align: text-bottom
}
#volume-panel label:last-of-type {
	color: red
}
#volume-panel input[type="radio"] {
	margin-left: 5px;
}
.controls {
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
}
.controls > * {
	flex: 0 0 auto;
	margin: 0 2px;
	cursor: pointer;
   font-size: 12px;
}
button#volume {
   position:absolute;
   width: 26px;
   height: 22px;
   right: 16px;
   top: 50%; margin-top:-11px;
   border: none;
   border-radius: 4px;
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 27.717 27.717' style='enable-background:new 0 0 27.717 27.717;' xml:space='preserve'%3e%3cg%3e%3cg id='c74_volume'%3e%3cpath d='M4.637,8.725H0v10.33h4.637l8.766,6.502c0,0,1.611,1.346,1.611-0.045c0-1.395,0-22.177,0-23.446 c0-1.092-1.418-0.025-1.418-0.025L4.637,8.725z'/%3e%3cpath d='M20.006,6.709c-0.461-0.46-1.207-0.46-1.668,0c-0.461,0.462-0.461,1.211,0,1.666c1.518,1.521,2.27,3.495,2.273,5.484 c-0.004,1.993-0.756,3.979-2.273,5.495c-0.461,0.459-0.461,1.211,0,1.672c0.23,0.23,0.531,0.344,0.836,0.344 c0.301,0,0.602-0.113,0.832-0.344c1.977-1.979,2.965-4.578,2.963-7.167C22.971,11.273,21.98,8.682,20.006,6.709z'/%3e%3cpath d='M23.207,2.994c-0.467-0.463-1.211-0.463-1.676,0c-0.457,0.463-0.457,1.208,0,1.671c2.549,2.548,3.822,5.869,3.824,9.206 c-0.002,3.352-1.27,6.694-3.824,9.25c-0.459,0.461-0.457,1.207,0,1.67c0.232,0.229,0.537,0.344,0.838,0.344 c0.303,0,0.607-0.115,0.838-0.344c3.006-3.018,4.51-6.973,4.51-10.92C27.717,9.937,26.203,5.996,23.207,2.994z'/%3e%3c/g%3e%3cg id='Capa_1_145_'%3e%3c/g%3e%3c/g%3e%3c/svg%3e");   background-repeat:no-repeat;
   background-position: center;
   background-size: 70%;
}
.hide {
	display: none;
}
@media all and (max-width: 500px) {
   .main {
   	flex-flow: column nowrap;
   }
   .sidebar {
   	order: 1;
      flex: 0 0 100%;
   }
   .content {
   	order: 2;
   	flex: 0 0 100%;
   }
}
//  Set variables on the html targets
var main = document.querySelector(".main");
var container = document.querySelector(".content");
var footer = document.querySelector(".footer");
   var volumePanel = document.getElementById("volume-panel");
   var guestButton = document.getElementById("guest-send");
   var ownerButton = document.getElementById("owner-send");
   var volumeButton = document.getElementById("volume");

// Toggle chat panel
var chatToggle = document.getElementById("chat-toggle");
   chatToggle.onclick = function() {
   document.getElementById("chat-panel").classList.toggle("hide");
}
// Toggle volume panel
function volumeControl() {
   volumePanel.classList.toggle("hide");
}
volumeButton.onclick = volumeControl;
text.onclick = function() {
   volumePanel.classList.add("hide");
}
//  Add dynamic content
var nextId = 1;
function guestComment() {
   var gc = document.createElement("div");
   gc.onclick = guestComment;
   gc.innerHTML = "Guest reply #" + nextId + "<br>" + document.getElementById("text").value;
   container.appendChild(gc);
   nextId += 1;
   // Auto scroll to bottom of content
   main.scrollIntoView(false);
}
guestButton.onclick = guestComment;

function ownerComment() {
   var oc = document.createElement("div");
   oc.classList.add("owner");
   oc.onclick = ownerComment;
   oc.innerHTML = "Owner reply #" + nextId + "<br>" + document.getElementById("text").value;
   container.appendChild(oc);
   nextId += 1;
   // Auto scroll to bottom of content
   main.scrollIntoView(false);
}
ownerButton.onclick = ownerComment;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.