doochik

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

doochik

/**
 * The first commented line is your dabblet’s title
 */
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.test {

doochik

.container {
   position: relative;
   width: 100px;
   height: 100px;
   border :1px solid;
   overflow: hidden;
}


.bg {

doochik

.a {
	border: 1px solid;
	padding: 5px;
	width: 100px;
}

.b {
 white-space: nowrap;
 	overflow-x: scroll;	overflow-y: hidden;	-webkit-overflow-scrolling: touch;
 	width: 100%;

doochik

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

doochik

div {
	transition: height 1s, width 1s, background 1s;
	border: 1px solid #000;
	width: 100px;
	height: 100px;
}

div:hover {
	background: #f00;
	width: auto;

doochik

.a {
	border: 1px solid #000;
	display: flex;
	overflow: hidden;
	flex-shrink: 1;
	width: 40px
}

.b {
	white-space: nowrap;

doochik

.wrap {
	width: 200px;
	border: 1px solid;
	display: flex;
}

.firstline {
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;

doochik

.popup {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 150px;
	height: 200px;
	border: 1px solid #000;
	overflow: hidden;
}

doochik

.messages-thead {
     display: flex;
     flex-direction: column-reverse;
}