JSFiddle - React, Tailwind, and code Playground

by Bujtás Teofil

HTML

<main>
  <div id="ablakKeret">
    <div id="ablakCim">Cím</div>
      <div id="ablakTartalomScroll">
        <div id="ablakTartalom">
teszt<br />
teszt<br />
teszt<br />
teszt<br />
teszt<br />
teszt<br />
teszt<br />
teszt<br />
teszt<br />
teszt<br />
      </div>
    </div>
    <div id="barHatter"></div>
    <div id="felsoBar" class="barFekvo"></div>
    <div id="alsoBar" class="barFekvo"></div>
    <div id="jobbBar" class="barAllo"></div>
    <div id="balBar" class="barAllo"></div>
  </div>
</main>

CSS

main {
    /*display: none;*/
    position: relative;
/*    box-sizing: border-box;*/
    overflow: hidden;
    width: 500px;
    height: auto;
    min-height: 150px;
    max-height: calc(100vh - 100px);
    margin: 60px auto 50px auto;
    background: linear-gradient(to top, #C4C4C4 0%,#FFFFFF 100%);
    border:solid 1px gray;
    border-radius:4px;
    padding:5px;
    box-shadow:0 0 15px 0 rgba(0,0,0, 0.5);
    z-index: 1;
}

#ablakKeret {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 15px;
    border: solid 1px gray;
    border-radius: 2px;
    box-shadow: 1px 1px 0 0 white, inset 1px 1px 0 0 white;
}

#ablakTartalomScroll {
    position: absolute;
    top: 19px;
    left: 20px;
    right: 4px;
    bottom: 7px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
}

#ablakTartalom {
  padding: 0 5px;
}

.barAllo {
  position:absolute;
  width:3px;
  top:19px;
  bottom:7px;
  z-index:3;
}
 
.barFekvo {
  position:absolute;
  height:3px;
  left:23px;
  right:24px;
  z-index:3;
}

#felsoBar {
  top:19px;
  border-top: solid 1px gray;
}

#alsoBar {
  bottom:7px;
  border-bottom: solid 1px white;
}

#balBar {
  left:20px;
  border-left: solid 1px gray;
  border-top: solid 1px gray;
  border-bottom: solid 1px white;
  border-top-left-radius: 3px;border-bottom-left-radius: 3px;
}

#jobbBar {
  right:20px;
  border-right: solid 1px white;
  border-top: solid 1px gray;
  border-bottom: solid 1px white;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

#barHatter {
  position:absolute;
  top:19px;
  bottom:7px;
  right:20px;
  left:20px;
  background:#E6E6E6;
  border-radius:3px;
}

#ablakCim {
    position: absolute;
    top: 2px;
    left: 7px;
    right: 7px;
    height: 17px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 0 white, 0 0 5px rgba(0,0,0, 0.5);
    z-index: 3;
}

JavaScript

if ( $( "#ablakKeret" ).innerHeight() >= $( "#ablakTartalomScroll" ).height() ) {
	$( "#ablakTartalom" ).width( 'calc(100% - 13px)' );
} else {
	$( "#ablakTartalom" ).width( '100%' );
}