title: React-draggable bounds attribute doesn't work if I don't have a fixed height (I think) - but I can't
body: <p>I'm using the <a href="https://www.npmjs.com/package/react-draggable" rel="nofollow noreferrer">react-draggable</a> package in order to make some elements draggable.</p>
  <p>I want to set the elements to be able to be dragged only in a specific part of the page, and that can be done with the &quot;bounds&quot; attribute according to the docs.</p>
  <p>So I want to set the bound to the parent element. It can be done using bounds=&quot;parent&quot;, and having an element with position: relative/absolute and a fixed width and height. Then this element will be considered the parent.</p>
  <p>I don't really know how to create a minimal, reproductive, example in this case (if someone would help me I'll gladly do it) because I have multiple react components and also images. I know about TypeScript Playground, but I don't know how can I link CSS/images/other components there.</p>
  <p>Here are my components though:
  DraggableGameStart.tsx</p>
  <pre><code>import GameDetails from '../GameComponents/GameDetails';
  import GameImage from '../GameComponents/GameImage';
  import DraggableGameAnswers from './DraggableGameAnswers';
  
  import './css/DraggableGameStart.css';
  import DraggableGameSlots from './DraggableGameSlots';
  
  function DraggableGameStart() {
      return (
          &lt;div className=&quot;draggable-game-content&quot;&gt;
              &lt;div className=&quot;draggable-game&quot;&gt;
                  &lt;GameDetails
                      info=&quot;test&quot;
                      question=&quot;test&quot;
                  /&gt;
                  &lt;GameImage
                      images={[{ imgSrc: './Untitled.png', imgAlt: 'test' },
                      { imgSrc: './Untitled.png', imgAlt: 'test' },
                      { imgSrc: './Untitled.png', imgAlt: 'test' },
                      { imgSrc: './Untitled.png', imgAlt: 'test' }]}
                      className=&quot;draggable-game-image&quot;
                  /&gt;
                  &lt;DraggableGameSlots
                  numberOfSlots={4}
                  className=&quot;draggable-game-slot-custom4&quot;
                  /&gt;
                  &lt;DraggableGameAnswers/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default DraggableGameStart;
  </code></pre>
  <p>GameDetails.tsx</p>
  <pre><code>import './css/GameDetails.css';
  import Audio from './Audio';
  
  type GameDetailsProps = {
      info: string,
      question: string
  }
  
  function GameDetails(props: GameDetailsProps) {
      return (
          &lt;div className=&quot;game-details&quot;&gt;
              &lt;div className=&quot;game-details-header&quot;&gt;
                  &lt;div className=&quot;game-details-content&quot;&gt;
                  &lt;div className=&quot;info&quot;&gt;
                      &lt;span className=&quot;info-text&quot;&gt;
                          {props.info}
                      &lt;/span&gt; 
                  &lt;/div&gt;
                  &lt;div className=&quot;question&quot;&gt;
                      &lt;span className=&quot;question-text&quot;&gt;
                          {props.question}
                      &lt;/span&gt; 
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;Audio/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default GameDetails;
  </code></pre>
  <p>GameImage.tsx</p>
  <pre><code>import './css/GameImage.css';
  
  type Image = {
      imgSrc: string,
      imgAlt: string
  }
  
  type GameImageProps = {
      images: Array&lt;Image&gt;,
      className: string
  }
  
  function GameImage(props: GameImageProps) {
      return (
      &lt;div className=&quot;game-image-wrapper&quot;&gt;
          {props.images.map((pair) =&gt; (
              &lt;img className={props.className} src={process.env.PUBLIC_URL + pair.imgSrc} alt={pair.imgAlt} /&gt;
          ))}  
      &lt;/div&gt;);
  }
  
  export default GameImage;
  </code></pre>
  <p>DraggableGameSlots.tsx</p>
  <pre><code>import &quot;./css/DraggableGameSlots.css&quot;;
  
  type DraggableGameSlotsProps = {
      className: string,
      numberOfSlots: number
  }
  
  function DraggableGameSlots(props: DraggableGameSlotsProps)
  {
      let sloturiConfigurate = Array&lt;boolean&gt;(props.numberOfSlots).fill(true);
      return (
          &lt;div className=&quot;draggable-game-slots&quot;&gt;
              {
                  sloturiConfigurate.map((val, index) =&gt; (
                      &lt;div className={`draggable-game-slot ${props.className}`}&gt;
                          Drop here
                      &lt;/div&gt;
                  ))
              }
          &lt;/div&gt;
      );
  }
  
  export default DraggableGameSlots;
  </code></pre>
  <p>DraggableGameAnswers.tsx</p>
  <pre><code>import Draggable from 'react-draggable';
  import DraggableGameImage from './DraggableGameImage';
  import './css/DraggableGameAnswers.css';
  
  function DraggableGameAnswers() {
      return (
          &lt;div className=&quot;draggable-game-answers&quot;&gt;
              &lt;DraggableGameImage className=&quot;draggable-game-image-answer&quot; imgSrc=&quot;./Untitled.png&quot; imgAlt=&quot;test&quot;&gt;&lt;/DraggableGameImage&gt;
              &lt;DraggableGameImage className=&quot;draggable-game-image-answer&quot; imgSrc=&quot;./Untitled.png&quot; imgAlt=&quot;test&quot;&gt;&lt;/DraggableGameImage&gt;
              &lt;DraggableGameImage className=&quot;draggable-game-image-answer&quot; imgSrc=&quot;./Untitled.png&quot; imgAlt=&quot;test&quot;&gt;&lt;/DraggableGameImage&gt;
              &lt;DraggableGameImage className=&quot;draggable-game-image-answer&quot; imgSrc=&quot;./Untitled.png&quot; imgAlt=&quot;test&quot;&gt;&lt;/DraggableGameImage&gt;
          &lt;/div&gt;
      );
  }
  
  export default DraggableGameAnswers;
  </code></pre>
  <p>Now, the CSS</p>
  <p>DraggableGameStart.css</p>
  <pre><code>.draggable-game-content {
      width: 100%;
      height: 40rem;
  }
  
  .draggable-game {
      position: relative;
      border: 1px solid black;
      border-radius: 25px;
      margin-left: 1.5rem;
      height: 38rem;
      text-align: center;
      margin-bottom: 1rem;
  }
  </code></pre>
  <p>GameDetails.css</p>
  <pre><code>.game-details {
      padding-top: 1rem;
  }
  
  .info, .question{
      border: 1px solid black;
      border-radius: 1.5rem;
      text-align: left;
      margin: 0.1rem 0;
      height: 2.5rem;
      line-height: 2.5rem;
      align-items: center;
  }
  
  .game-details-header {
      display:flex;
      flex-direction:row;
      justify-content: center;
  }
  .game-details-content {
      width:75%;
  }
  
  .info-text, .question-text {
      margin-left: 1.25rem;
  }
  </code></pre>
  <p>GameImage.css</p>
  <pre><code>.game-details-image {
      margin-top: 2rem;
      border-radius: 15px;
      width: 200px;
      height: 200px;
  }
  
  .game-answers-image {
      border-radius: 15px;
      width: 200px;
      height: 200px;
      margin: 0 !important;
      padding: 0 !important;
  }
  
  .draggable-game-image {
      border-radius: 15px;
      margin: 1rem;
  }
  </code></pre>
  <p>DraggableGameSlots.css</p>
  <pre><code>.draggable-game-slot {
      display: inline-block;
      border-radius: 15px;
      margin: 0 1rem 1rem 1rem;
      border: 1px dashed black;
      width: 200px;
      height: 200px;
      line-height: 200px;
  }
  </code></pre>
  <p>DraggableGameAnswers.css</p>
  <pre><code>.draggable-game-answers {
      height: 100%;
  }
  </code></pre>
  <p>Now my page looks like this:
  <a href="https://i.stack.imgur.com/VjDwz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VjDwz.png" alt="photo" /></a></p>
  <p>due to the height settings in DraggableGameStart.</p>
  <p>But the content overflows - and I just can't set the height to be more, because in the other components this height is sufficient for my layout, this is the only page where it overflows.</p>
  <p>So I thought about changing the height to min-height - and my page will look okay then.</p>
  <p><a href="https://i.stack.imgur.com/3Pp43.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Pp43.png" alt="photo2" /></a></p>
  <p>The only problem is that now the bounds attribute of react-draggable doesn't work properly - the element is dragged only on the top of the .draggable-game div, and only horizontally. Here's what happens if I drag a bit a button (just so the events are fired)</p>
  <p><a href="https://i.stack.imgur.com/itJsD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/itJsD.png" alt="photo3" /></a></p>
  <p>And from this position it can be dragged only horizontally.</p>
  <p>So, my question is: is there any way to make the bounds setting work properly while also having set the min-height property? Or is there any better way to achieve what I want without using min-height and while also making bounds work?</p>