JSFiddle - React, Tailwind, and code Playground

by tmtron

HTML

<div id="parent">
  <div> Toolbar</div>
  <div id="container">
    <img id="image" src="https://via.placeholder.com/150x400" />
    <!-- 
-->

    <svg id="child1" viewBox="0 0 300 200" preserveAspectRatio="none"  xmlns="http://www.w3.org/2000/svg">
      <rect x="2" y="2" width="296" height="196" style="fill:#dedede;stroke:#000000;stroke-width:2" />
      <text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#000dff">300&#215;200</text>
    </svg>

    <!-- 
    <div id="child1">child1</div>
-->
  </div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#parent {
  background-color: lightgrey;
  padding: 20px;
  height: 100%;
  overflow: hidden;
}

#container {
  display: block;
  background-color: black;
  border: 1px solid blue;
  position: relative;
  width: 100%;
  height: auto;
  overflow-y: auto;
}

#image {
  border: 5px solid green;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 50px;
  max-height: 200px;
}

#child1 {
  background-color: blue;
  box-sizing: border-box;
  opacity: 0.5;
  display: block;
  border: 1px solid #ff0;
  position: absolute;
  left: 10%;
  top: 10%;
  /* not okay - svg is higher than image
  bottom: 10%;
  right: 10%;
  */
  /* positiona and scaling okay - no scrollbars
  height: 80%;
  width: 80%;
  */
  height: 80%;
  width: 80%;
}