html - 当一个元素被转换隐藏时，如何让 flex child 展开？

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-basis强制主要内容占宽度的 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>