title: CSS trick to avoid overflow in using positioning properties
body: <p>This issue happens in my custom swipable list element.
  <a href="https://i.stack.imgur.com/Zgpxb.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zgpxb.gif" alt="enter image description here" /></a>
  The logs written while scrolling are the <code>scrollLeft</code> of the list.</p>
  <p>As I'm implementing a scroll element and its scrollbars, and a list element from the scratch, all elements' <code>overflow</code> is <code>hidden</code>. The list is flex box, and a child of it gets swiped by changing their <code>left</code> or <code>translateX</code> property(in the above demo, I just used <code>translateX</code> but both + changing <code>right</code> produce the same result). And changing the <code>left</code> property of the children causes this overflow.</p>
  <p>I've already found solutions to avoid just the weird horizontal scrolling when there's a swiped child to the right(<strong>note that the overflow of the list on y axis only happens when the <code>left</code> property is positive</strong>), but they need more codes and some of them causes another issue like event handling in the DOM tree. So I want to find a nice and light trick solving this overflow.</p>
  <p>Note that setting the <code>position</code> property of the children as <code>absolute</code> doesn't work.</p>
  <p>To demonstrate this overflow occurrence, I made a backbone demo showing that setting a positive value on <code>left</code> property causes the overflow(see the horizontal scrollbar appears).
  <div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    position: relative;
    flex-direction: column;
  }
  body {
    height: 90vh;
  }
  #view-scroller {
    display: flex;
  }
  #swipable-list-view {
    height: 100%;
    flex-shrink: 1;
    display: flex;
  }
  [swiped] {
    left: 20%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="view-scroller"&gt;
    &lt;div id="swipable-list-view"&gt;
      &lt;div&gt;Item&lt;/div&gt;
      &lt;div swiped&gt;Swiped Item&lt;/div&gt;
      &lt;div&gt;Item&lt;/div&gt;
    &lt;/div&gt;
  &lt;div&gt;</code></pre>
  </div>
  </div>
  </p>