CSS 自动宽度不适用于 Flexbox
Posted
技术标签:
【中文标题】CSS 自动宽度不适用于 Flexbox【英文标题】：CSS Auto Width is not Working with Flexbox 【发布时间】：2013-07-07 21:37:00 【问题描述】：问候溢出者，
我有一个 html 页面如下：
1. HTML、BODY、DIV 和 SPAN 被重置为具有 0px border、padding、margin 和 outline
2. HTML、BODY 和 DIV 元素有 display: -webkit-flex 和 -webkit-flex: 0 0 auto
3. HTML 和 BODY 与 height: 100vh 和 width: 100vw
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，width: 10rem 为#sidebar 和width: 100vw #main
问题：我原以为#slider 的宽度是10rem + 100vw，但即使我将#main 的宽度更改为更小的值，例如50vw，它也只是100vw！
我这里有什么遗漏吗？
亲切的问候
/*
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>【问题讨论】：
使用的标记和确切的 CSS 在哪里？以及哪些浏览器？ 请看更新。使用最新的 Chrome 27。似乎当 #main 使用 100rem 而不是 100rem 时，它起作用了！但我需要大众。 对不起，我的意思是 100vw 而不是 100rem 为什么.slider 的宽度是 100vw + 10rem？哪个.slider 元素，你有多个？这里没有.slider 元素的样式，只有div。
对不起，我是说body>.slider
【参考方案1】：
请参阅http://codepen.io/anon/pen/fluKI，它可以正常工作（Chrome 27）
据我所知，您需要设置 flex 容器的宽度和高度 (#slider)。在#slider 上使用flex: 0 0 auto; 不会达到您的预期，因为它是一个弹性容器而不是弹性项目本身（阅读：它不在弹性容器中）。
另外请注意flex: 0 0 auto; 和flex: none; 是一样的，它消除了项目的灵活性。
【讨论】：
我将 HTML 和 BODY 更改为 flex 容器，因此 #slider 也是一个 flex 项目，但没有运气！但是，当将#main 的 100vw 更改为 100rem 时，它起作用了！但我需要 vw 而不是 rem。以上是关于CSS 自动宽度不适用于 Flexbox的主要内容，如果未能解决你的问题，请参考以下文章
UITableViewCell自动布局宽度不适用于UIBezierPath