title: Push siblings out of view while keeping their width
body: <p>When hovering a flex element i now set the flex-basis to 100%. While doing this all siblings get resized to a width of 0 (i think) and this is showing in the animation.</p>
  
  <p>Is it possible (preferred with just css) to let these sibling keep their width (nr of siblings is variable so in some scenarios there will be more columns then the example below) while the element that is hovered is expanding to 100% width? So that it looks as if they where pushed out of the container instead of resized to a width of 0.</p>
  
  <p>Here is how it works now: <a href="https://jsfiddle.net/luffyyyyy/y8p9g2bs/8/" rel="nofollow noreferrer">https://jsfiddle.net/luffyyyyy/y8p9g2bs/8/</a></p>
  
  <pre><code>.container {
      width: 100vw;
      height: 60vh;
      display: flex;
      align-items: stretch;
      overflow: hidden;
  }
  
  .day-container {
      flex: 1; 
      display: flex;
      flex-direction: column;
      transition: flex-basis 1000ms ease-in-out;
  }
  
  .day-container:hover {
      flex-basis: 100%;
  }
  </code></pre>