html - 使 div 的所有子级占据 100% 高度和 100% 宽度，以便只有第一个子级可见

Question

我有一个 div，其中包含多个 div，我希望每个子 div 都占用 100 ％高度和100％宽度，这样只有第一个实际上是可见的(父级有overflow:hidden)，其余的位于它的右侧，但隐藏。当我尝试给它们全部 height: 100%; width: 100%; 它们没有获得父级的完整宽度，而是将完整宽度在它们之间分割，以便它们全部可见。

.parent {
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 200px;
  overflow: hidden !important;
}

.children {
  height: 100%;
  width: 100%;
  position: relative;
}

#child1 {
  background-color: red;
}

#child2 {
  background-color: green;
}

<div class="parent">
  <div class="children" id="child1"></div>
  <div class="children" id="child2"></div>
</div>

E:添加了我的代码。

Answer 1

您可以为子项设置:flex-shrink: 0;