Question

问候Overflowers，

我有一个HTML页面如下：

1。 HTML，BODY，DIV和SPAN重置为0px border，padding，margin和outline

2。 HTML，BODY和DIV元素有display: -webkit-flex和-webkit-flex: 0 0 auto

3。包含height: 100vh和width: 100vw

的HTML和BODY

4。在BODY内部，一个名为#slider的DIV display: -webkit-flex和 - webkit-flex: 0 0 auto

5。在此#slider内，两个DIV #sidebar和#main display: -webkit-flex和-webkit-flex: 0 0 auto，{{1} 1}}用于width: 10rem，#sidebar用于width: 100vw

问题：我希望#main的宽度为#slider，但即使我将10rem + 100vw的宽度更改为更小的100vw，它也只有#main 50vw！

我在这里遗漏了什么吗？

亲切的问候

/*
	unicode-bidi: bidi-override;
	-webkit-user-modify: read-write-plaintext-only;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: -webkit-transform 1s ease;
*/

body, div, html, span {
	background: transparent;
	border: 0px;
	cursor: default;
	direction: rtl;
	margin: 0px;
	outline: none;
	padding: 0px;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
}

body, html, div {
	background: black;
	display: -webkit-flex;
	overflow: hidden;
	-webkit-flex: none;
}

body, html {
	height: 100vh;
	width: 100vw;
}

span {
	background: white;
}

.stretch {
	-webkit-flex: 1;
}

.vertical {
	-webkit-flex-flow: column;
}

body>.slider {
	/*-webkit-transform: translateX(10rem);*/
}

#main {
	width: 100vw;
}

body>.slider>#west {
	width: 10rem;
}

#filter-sort.region, #filter-sort-options.region {
	width: 10rem;
}

#doc>#east {
	background: orange;
	height: 6rem;
	width: 6rem;
	-webkit-align-items: center;
	-webkit-justify-content: center;
}

#doc>#center {
	background: green;
}

#header, #doc-types {
	height: 2.75rem;
}

#preview {
	max-height: 6rem;
	max-width: 6rem;
}

#search.button, #filter-sort.button {
	background: red;
	width: 3rem;
}

#doc-type {
	background: blue;
	width: 5rem;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link type="text/css" rel="stylesheet" href="style.css" />
	</head>
	<body ng:controller="Docs">
		<div class="slider">
			<div id="main" class="region vertical">
				<div id="header" class="region">
					<div id="search" class="button"></div>
					<div id="center" class="region stretch">
					</div>
					<div id="filter-sort" class="button"></div>
				</div>
				<div id="doc-types" class="region">
					<div class="slider">
						<div id="doc-type" class="button"></div>
					</div>
				</div>
				<div id="docs" class="region">
					<div class="slider stretch vertical">
						<div id="doc" class="region">
							<div id="east" class="region">
								<div id="preview" class="region"></div>
							</div>
							<div id="center" class="region stretch vertical">
								<span id="title" class="label"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="west" class="region">
				<div class="slider">
					<div id="filter-sort" class="region vertical">
						<div id="header" class="region">
							<span id="title" class="label">Filter and Sort</span>
						</div>
						<div id="grades" class="region">
							<div id="center" class="region stretch vertical">
								<span id="grades" class="label">Grade</span><br />
								<span id="grades" class="field"></span>
							</div>
							<div id="west" class="region"></div>
						</div>
						<div id="doc-topic" class="region">
							<div id="center" class="region stretch vertical">
								<span id="doc-topic" class="label">Doc Topic</span><br />
								<span id="doc-topic" class="field"></span>
							</div>
							<div id="west" class="region"></div>
						</div>
						<div id="course" class="region">
							<div id="center" class="region stretch vertical">
								<span id="course" class="label">Course</span><br />
								<span id="course" class="field"></span>
							</div>
							<div id="west" class="region"></div>
						</div>
						<div id="sort" class="region">
							<div id="center" class="region stretch vertical">
								<span id="sort" class="label">Sort</span><br />
								<span id="sort" class="field"></span>
							</div>
							<div id="west" class="region"></div>
						</div>
					</div>
					<div id="filter-sort-options" class="region vertical">
						<div id="header" class="region">
							<div id="back" class="button"></div>
							<div id="center" class="region stretch">
								<span id="title" class="label">Options</span>
							</div>
						</div>
						<div id="grades" class="region">
							<div class="slider vertical">
								<span id="grade" class="label"></span>
							</div>
						</div>
						<div id="doc-topics" class="region">
							<div class="slider vertical">
								<span id="doc-topic" class="label"></span>
							</div>
						</div>
						<div id="courses" class="region">
							<div class="slider vertical">
								<span id="course" class="label"></span>
							</div>
						</div>
						<div id="sorts" class="region">
							<div class="slider vertical">
								<span id="sort" class="label"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Answer 1

请参阅http://codepen.io/anon/pen/fluKI，其功能与预期一致（Chrome 27）

据我所知，您需要设置Flex容器的宽度和高度（#slider）。在flex: 0 0 auto;上使用#slider将无法达到您的预期，因为它是一个弹性容器而不是一个弹性项本身（读取：它不在Flex容器中）。

另请注意，flex: 0 0 auto;与说flex: none;相同，后者会删除项目的灵活性。

CSS自动宽度不适用于Flexbox

1 个答案: