Как я могу сделать div взять 100% после того, как другой элемент получит transform'd

Question

Вот jsfiddle: https://jsfiddle.net/ohgbce6v/

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  overflow: hidden;
}

.game-container {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  width: 100%;

  .left {
    flex-grow: 1;
    background: lightcoral;

    .topbar-inventory-container {
      width: calc( 100% - 40px );
      margin: 0 20px;
      display: flex;
      flex-flow: column nowrap;

      .inventory-hanger-container {
        height: 40px;
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;

        .vertical-separator {
          margin: 0 40px;
          background: lightgrey;
        }
      }

      .inventory {
        height: 80px;
        background: lightgrey;
        width: 100%;
      }
    }
  }

  .right-container {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    transition: transform .3s ease-in-out;

    &.closed {
      transform: translateX( $thickness + 400px);
    }

    .hide-shop-btn {
      position: absolute;
      height: 60px;
      width: 40px;
      left: -40px;
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
      background: black;
      display: flex;
      align-self: center;
      align-items: center;
      justify-content: center;

      .fa-caret-left {
        color: white;
        font-size: 25px;
      }
    }

    .right {
      width: 400px;
      height: 100%;
      background: darkgray;
    }
  }
}

Когда вы нажимаете на маленький черный кусочек, он должен закрыть меню, а розовое пятно должно занять оставшееся пространство.

И вот как это выглядит, когда он закрыт:

Как мне сделать так, чтобы розовое пятно занимало остальное пространство после того, как серая область трансформировалась?

Answer 1

Не используйте transform для этого. Вместо этого вы можете использовать что-то вроде margin-right: -415px; для достижения того, что вы хотите.

Когда вы используете transform, элемент преобразуется, НО он по-прежнему занимает место в DOM, как если бы он не был преобразован ... воспринимайте его как призрачную копию элемента.

Обновите это:

.game-container .right-container.closed {
      margin-right: -415px 
}

Обновление скрипки

Подробнее о переводе можно прочитать здесь .

Важно отметить, что элемент, использующий преобразование, не вызовет другие элементы, чтобы обтекать его.