CSS Cheatsheet

// bootsrtap row not gutters ( pading between )
row.no-gutters

// Chrome console.log coloring
console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", 'User', 100);


// Height Transition Effect - with height:auto;
book {
  max-height:100px; <-- default height
  transition: max-height 0.5s ease-in;
}

book:hover {
  /*height:auto;*/
  max-height: 500px; <-- auto height, 500px is maximum height
}


// Table Scrollable
https://codepen.io/tjunussov/pen/veOgxO
/*
<div class="scroll-wrapper">
  <div class="scrollcontainer">
	   <div  class="scrollable"></div>
  </div>
</div>
*/
.scroll-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}
.scrollcontainer {
  position:relative;
  flex:1;
}
.scrollable { position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; }
.left-wrapper .scrollable::-webkit-scrollbar {  width: 3px; height: 3px;}
.left-wrapper .scrollable::-webkit-scrollbar-thumb { background: rgba(104,45,134,.3); }


/**********************/
New Line Break
v:after{ content: "\a"; white-space: pre; }
<div>
  <l>Label</l>
  <v>Value</v>
</div>