我有一个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：添加了我的代码。
答案 0 :(得分：2)
您可以为儿童设置：flex-shrink: 0;
答案 1 :(得分：1)
如果我理解正确，你希望他们并排。在这种情况下，第一个将是可见的，其余的将在父可见区域之外。您可以使子项内联块和strop文本包装在父项上。这将为您提供所需的效果。
我将在下面的示例中使用overflow: scroll代替overflow: hidden，这样您就可以滚动并查看其他框了。
.parent {
background-color: #f00;
height: 100px;
white-space: nowrap;
overflow-x: scroll;
}
.child {
display: inline-block;
background-color: #0ff;
height: 100%;
width: 100%;
}<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
<div class="child">Child 4</div>
<div class="child">Child 5</div>
</div>
请注意，孩子们之间存在差距。这是因为内联对象之间的空白区域转换为一个空格。要摆脱它，删除孩子之间的空白区域。您可以通过物理删除或将其转换为注释来实现此目的：
.parent {
background-color: #f00;
height: 100px;
white-space: nowrap;
overflow-x: scroll;
}
.child {
display: inline-block;
background-color: #0ff;
height: 100%;
width: 100%;
}<div class="parent">
<div class="child">Child 1</div><div
class="child">Child 2</div><div
class="child">Child 3</div><div
class="child">Child 4</div><div
class="child">Child 5</div>
</div>
答案 2 :(得分：1)
您可以使用flex: 0 0 100%上的.children来阻止增长和收缩 flex-items em>，并将初始宽度设置为100%：
.parent {
display: flex;
/*flex-direction: row; by default*/
width: 200px;
height: 200px;
overflow: hidden;
}
.children {
flex: 0 0 100%;
/*height: 100%;*/
/*width: 100%;*/
/*position: relative;*/
}
#child1 {
background: red;
}
#child2 {
background: green;
}<div class="parent">
<div class="children" id="child1"></div>
<div class="children" id="child2"></div>
</div>
答案 3 :(得分：0)
您可以将父级的max-height设置为与孩子的height相同
.child {
height: 100px;
width: 100%;
}
.parent {
max-height: 100px;
width: auto;
overflow: auto;
border: 1px solid red;
}<div class="parent">
<div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
<div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
<div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
<div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
<div class="child">Notice how we’re using the same interface (subscribe) to deal with totally different types of operations (including the document listener we added in the previous example). This is one of the major strengths of using Observables. We don’t need to wire
our brains differently. If the data can be thought of as evented, stream or async, we can wrap it in an Observable.</div>
</div>
答案 4 :(得分：0)
div标记是块级元素，具有显示为块的默认行为。您可能应该考虑使用display：none命令，以便元素不占用空间。几乎CSS中的每个元素都有默认行为，如果您希望元素的行为不同，则必须更改这些行为。如果CSS不理解命令它只是忽略它并继续，就像没有发出命令一样。 CSS的行为与此类似，因此每当遇到错误时，渲染都不会停止。这与您将遇到异常或错误的编程语言形成鲜明对比。听起来你想要的行为是不可见的元素不占用包含元素中的空间，这可以通过display：none属性来实现。您始终可以在控制台中的元素上使用getComputedStyle（）来查看实际应用于元素的样式