body,
button,
input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

body {
  margin: 0;
  padding: 25px;
}

p,
li {
  max-width: 800px;
}

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.demo {
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
}

.small {
  height: 180px;
  width: 250px;
}

.medium {
  height: 250px;
  width: 300px;
}

.padded {
  padding: 20px;
}

.fullScreen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

[unresolved] {
  display: none;
}

:not(:defined) {
  display: none;
}

body,
button,
input {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
}

body {
  margin: 0;
  padding: 25px;
}

p,
li {
  max-width: 800px;
}

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.demo {
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
}

.small {
  height: 180px;
  width: 250px;
}

.medium {
  height: 250px;
  width: 300px;
}

.padded {
  padding: 20px;
}

.fullScreen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

[unresolved] {
  visibility: hidden;
}

:not(:defined) {
  visibility: hidden;
}

Make unresolved components invisible rather than display: none. Seems that latter causes components like AutosizeTextarea to do incorrect style calcs when first mounted.
Make unresolved components invisible rather than display: none. Seems that latter causes components like AutosizeTextarea to do incorrect style calcs when first mounted.
