title: Div with fixed width in a scollable container
body: <p>I'm trying to make an area where I can drop and place items inside a container with a fixed width.</p>
  
  <p>The container contains a first <code>div</code> to display an image and in this <code>div</code> there is a second one with a reduced area to drop my items.</p>
  
  <pre><code>&lt;div id="page" style="overflow:scroll;"&gt;
      &lt;div id="imageContainer"&gt;
          &lt;div id="dropZone"&gt;
              &lt;label id="item1"&gt;Item1&lt;/label&gt;
              &lt;label id="item2"&gt;Item2&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="form-group" style="padding-top:10px; text-align:center"&gt;
              &lt;button id="BacktoProjet"&gt;Back&lt;/button&gt;
              &lt;button id="btnSave"&gt;Save&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is my image and the drop have a bigger width than my container.
  The scroll works to avoid the image to overflow but if you open the inspector, you can see that the children <code>div</code> have their real width even if we don't see them on the display.</p>
  
  <p>When you scroll and use the inspector, you can see the drop area move with its parent which is nice.
  But when you try to drop an item in the part of the drop area which is hidden and not in the container, the drop works but I don't want it.</p>
  
  <p><a href="https://imgur.com/a/P1wBfVM" rel="nofollow noreferrer">Screenshot of the inspector</a> </p>
  
  <p>Is there a way to avoid this problem without changing the size of the image and the drop are ? When you scroll and use the inspector, you can see the drop area move with its parent. </p>
  
  <p>Here is a <a href="https://jsfiddle.net/u7u9u555/2/" rel="nofollow noreferrer">fiddle</a></p>