oli

/**
 * flexbox width test
 */
.ruler {
  width: 984px;
  height: 6px;
  background-color: #888;
 }
.container {
  width: 983px; /* 983 - 2px (inter-box spacing) = 981 / 3 = 327px */

oli

/**
 * Vertical centering with scrolling overflow
 */
.wrapper1,
.wrapper2 {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
 }

oli

/**
 * Vertical centering with scrolling overflow
 */
.wrapper1,
.wrapper2 {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
 }

oli

/**
 * Table layout and ellipsis
 */

.table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%
}
td {

oli

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

oli

/**
 * removing text-shadow using ::selection kills the selection background color
 */

p {text-shadow: -1px -1px 0 #fde, 1px -1px 0 #fde, -1px 1px 0 #fde, 1px 1px 0 #fde;}
::selection {text-shadow: none; background-color: #b1d7fe;}

oli

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

p {text-shadow: -1px -1px 0 #fde, 1px -1px 0 #fde, -1px 1px 0 #fde, 1px 1px 0 #fde;}
::selection {text-shadow: none;}

oli

/**
 * Generated content and line wrapping
 */

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;

oli

/**
 * Generated content and line wrapping
 */

.span1::after {
  content: "→→→→→→";
}
.span2::after {
  content: "\034F→→→→→";
}

oli

/**
 * @font-face and serif for Japanese
 */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

body {font-family: serif;}
.test {font-family: "Source Sans Pro", serif;}