CSS |宽度为100％的溢出子元素

Question

问题

首先：codepen

正文，html宽度和高度= 100％

body, html {
    width: 100%;
    height: 100%;
}

我的父div有宽度100％，身高100％，身体高出html

.p {
    width: 100%;
    height: 100%;
    background: green;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
}

然后： 我有2个子元素，高度100％，宽度20％+ 80％，溢出-x：滚动

.c1 {
    height: 100%;
    width: 20%;
    background: red;
    overflow-x: scroll;
}
.c2 {
    height: 100%;
    width: 80%;
    background: blue;
    overflow-x: scroll;
}

我不明白为什么会出现滚动？

Answer 1

删除，overflow-x: scroll

overflow-x: scroll属性始终会显示滚动条，即使所有内容都适合您也无法滚动它。

＆＃13;

＆＃13;

body, html {
	width: 100%;
	height: 100%;
  margin: 0px;
}
.p {
	width: 100%;
	height: 100%;
	background: green;
	display: flex;
	flex-direction: row;
}
.c1 {
	height: 100%;
	width: 20%;
	background: red;
	
}
.c2 {
	height: 100%;
	width: 80%;
	background: blue;

}

＆＃13;

<div class="p">
	<div class="c1"></div>
	<div class="c2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

请运行以上代码段

Answer 2

将overflow: scroll;更改为overflow: auto