CSS自動寬度不與Flexbox的工作

我有一個HTML頁面如下：

HTML，BODY，資料覈實和跨度復位有0像素邊界，填充，保證金和概述
HTML，BODY和DIV元件具有顯示：-webkit-flex和-webkit-FLEX：0 0自動
HTML和BODY隨高度：100vh和寬度：100vw
體內，一個DIV命名＃帶顯示的滑塊：-web KIT-flex和-webkit-FLEX：0 0自動
這裏面#slider，兩個div #sidebar並與顯示#main：-webkit-flex和-webkit-FLEX：0 0汽車兩者，寬度：10rem爲#sidebar和寬度：100vw爲#main

問題：我期待#slider的寬度是10rem + 100vw，但即使我改變#main的寬度的東西，只有100vw小如50vw！

我缺少這裏什麼？

親切的問候

<!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; 
}

來源

2013-07-10 geeko

的標記和使用的準確CSS是哪裏？哪個瀏覽器？ – cimmanon

請參閱更新。使用最新的Chrome 27。它似乎是使用100rem而不是100rem #main它的工作！但我需要大衆。 – geeko

對不起，我的意思，而不是100rem – geeko

見http://codepen.io/anon/pen/fluKI正如你所期望它的工作原理（鉻27）

據我可以從你的描述說，你需要設置你的Flex的寬度和高度容器（#slider）。在#slider使用flex: 0 0 auto;不會做你所期望的，因爲它是一個柔性的容器，而不是柔性的項目本身（閱讀：它不是在柔性容器）。

另請注意，flex: 0 0 auto;與flex: none;相同，可以消除物品的靈活性。

來源

2013-07-10 06:20:41 stephenhay

我將HTML和BODY改爲flex容器，這樣#slider也是一個flex項目，但沒有運氣！然而，當改變100vw的#main到100rem它工作！但我需要vw不rem。 – geeko

CSS自動寬度不與Flexbox的工作

回答

相關問題