Greetings Overflowers,
I have an HTML page as follows:
- HTML, BODY, DIVs, and SPANs reset have a 0px border, padding, margin, and schema
- HTML, BODY, and DIV elements display: -webkit-flex and -webkit-flex: 0 0 auto
- HTML and BODY with height: 100vh and width: 100vw
- Inside the BODY DIV named #slider with display: -webkit-flex and -webkit-flex: 0 0 auto
- Inside this #slider are two DIVs #sidebar and #main with display: -webkit-flex and -webkit-flex: 0 0 auto for both, width: 10rem for #sidebar and width: 100vw for #main
Problem: I expected the width of #slider to be 10rem + 100vw, but it is only 100vw, even if I changed the width of #main to a smaller one, like 50vw!
Am I missing something here?
Yours faithfully
<!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; }
source share