Как заставить flex child расширяться, когда один элемент скрыт с помощью transform?

Question

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

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

.parent {
  background-color: blue;
  display: flex;
}

.child {
  background-color: red;
  flex: 1 1;
}

.hidden-child {
  background-color: green;
  transform: translateX(100px);
  width: 100px;
}

JSFiddle: https://jsfiddle.net/Crotanite/d2vwhnk5/

Answer 1

Используйте flex-based , чтобы заставить основное содержимое занимать 100% ширины.
Вы также можете использовать white-space: nowrap, чтобы дочерний элемент не разбился на несколько строк.

body {
  margin: 0;
  overflow: hidden;
}

.parent {
  background-color: blue;
  display: flex;
  align-items: flex-start;
}

.child {
  background-color: red;
  flex: 1 0 100%; /* here */
}

.hidden-child {
  background-color: green;
  transform: translateX(100px);
  width: 100px;
  white-space: nowrap; /* and here */
}

<div class="parent">
  <div class="child">
    child
  </div>
  <div class="hidden-child">
    hidden child
  </div>
</div>