JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

HTML

<div id="mainDiv">
  <div class="container">
    <div class="div1">
      <div class="overflow-div-1">
        <div class="overflow-div-2">
          <div class="overflow-div-3">
            <div class="output-item">
              <div class="field">
                <div class="input">
                  <div id="color-picker-container">
                    <div class="color-label"></div>
                    <div id="color-picker"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#mainDiv {
  top: 0;
  bottom: 0;
  width: 265px;
  padding: 5px;
  background-color: lightblue;
  position: absolute;
  z-index: 4;
}
.container {
  position: relative;
  height: 100%;
  border: solid 1px green;
}
.div1 {
  top: 0;
  bottom: 0;
  width: 100%;
  position: absolute;
}
/**IMPORTANT**/
.overflow-div-1 {
  top: 10px;
  bottom: 10px;
  width: 100%;
  background-color: lightgreen;
  position: absolute;
  //overflow: auto;
}
/**IMPORTANT**/
.overflow-div-2 {
  min-height: 100px;
  overflow: hidden;
  border: solid 1px blue;
}
/**IMPORTANT**/
.overflow-div-3 {
  height: 0;
  overflow: hidden;
}
#color-picker-container {
  position: absolute;
  z-index: 5;
  right: 0;
}
#color-picker-container #color-picker {
  position: absolute;
  top: 0;
  left: 40px;
  background-color: #fff;
  height: 160px;
  width: 200px;
  border: 1px solid #ccc;
  opacity: 1;
  padding: 5px;
}
#color-picker-container .color-label {
  height: 20px;
  width: 40px;
  background-color: red;
}