6
Greetings Overflowers,CSS Auto Chiều rộng không được làm việc với Flexbox
Tôi có một trang HTML như sau:
- HTML, BODY, DIV và kéo dài được đặt lại để có 0px biên giới, đệm, lề và phác thảo
- HTML, BODY và các yếu tố DIV có hiển thị: -webkit-flex và -webkit-flex: 0 0 auto
- HTML và BODY với chiều cao: 100vh và width: 100vw
- Bên BODY, một DIV tên # thanh trượt với màn hình: -web kit-flex và -webkit-flex: 0 0 auto
- Bên trong #slider này, hai DIV #sidebar và #main với display: -webkit-flex và -webkit-flex: 0 0 auto cho cả hai, width: 10rem cho #sidebar và width: 100vw cho #main
Vấn đề: Tôi đã mong chiều rộng #slider là 10rem + 100vw, ngay cả khi tôi thay đổi chiều rộng #main thành thứ gì đó nhỏ hơn như 50vw!
Tôi có thiếu gì ở đây không?
Kind coi
<!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>
/*
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;
}
Đánh dấu và CSS chính xác được sử dụng là ở đâu? Và trình duyệt nào? – cimmanon
Vui lòng xem bản cập nhật. Chrome 27 mới nhất được sử dụng. Có vẻ như khi sử dụng 100rem thay vì 100rem cho #main nó hoạt động! Nhưng tôi cần vw. – geeko
Xin lỗi tôi có nghĩa là 100vw thay vì 100rem – geeko