2016-06-10 146 views
1

我在widthmax-width之間存在一個問題,該元素在具有祖父母柔性定位容器的元素中工作。寬度(以像素爲單位)忽略最大寬度:100%

當我在這個元素中使用width的像素與max-width: 100%,如果寬度大於它的父項,它只是忽略max-width:100%。但是,如果例如我使用width: 150%,那麼max-width:100%就起作用了。

body{ 
 
    width: 640px; 
 
    height: 360px; 
 
    position: relative; 
 
} 
 
body:before{ 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    border: 2px solid black; 
 
} 
 
body:after{ 
 
    content:"16:9 screen size ratio example"; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 10px; 
 
} 
 
#flex-container{ 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    background-color: #95a5a6; 
 
} 
 
#sidebar{ 
 
    min-width:150px; 
 
    flex: 0 1 150px; 
 
    background-color: #7f8c8d; 
 
} 
 
#main-content{ 
 
    width:100%; 
 
    flex: 1 1 auto; 
 
    background-color: white; 
 
} 
 
.page{ 
 
    width: 100%; 
 
    padding: 16px; 
 
    box-sizing: border-box; 
 
} 
 
.grid{ 
 
    width: 800px; 
 
    max-width: 100%; 
 
    height: 200px; 
 
    background-color: red; 
 
    color: white; 
 
    padding: 16px; 
 
    box-sizing: border-box; 
 
}
<div id="flex-container"> 
 
    <div id="sidebar"><h2>Sidebar</h2></div> 
 
    <div id="main-content"> 
 
    <div class="page"> 
 
     <h1>Content page</h1> 
 
     <div class="grid"> 
 
     A grid with certain width defined in units and based on the device. Specified width should not exceed its parent width (max-width: 100%). 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<br><br><br> 
 

 

 
Should work like this: 
 
<br> 
 
<div style="width:640px;height:360px; border: 2px solid black;background-color:white;"> 
 
    <div style="width:100%;height:100%;"> 
 
    640px width parent 
 
    <div style="max-width:100%; width:800px; height:100px; background-color:green;color:white;"> 
 
     800px width with max-width:100% 
 
    </div> 
 
    </div> 
 
</div>

這裏是JSFiddle

+0

最大寬度總是跳動寬度。不確定你的問題是什麼。 –

+0

@Paulie_D應該。這裏是問題,在我的例子中'max-width'沒有超過'width'。看看jsfiddle。 –

回答

2

您的貨櫃(body)是width: 640px

body#flex-container)的孩子是width: 100%。換句話說,640px。

您的左側彈性項目(#sidebar)爲min-width: 150px。爲了論證的緣故:width: 150px

您的右側彈性項目(#main-content)爲width: 100%。計算到:531.989px(原因待定)。

#main-content.page)的孩子是width: 100%。另外,531.989px

.page.grid)的孩子是width: 500px。這很適合父母,剩餘空間(31.989px)。

您的max-width: 100%從未看到任何操作。它的工作原理,它只是不被要求。

在第二個示例中,您將width: 800px應用於.grid等效值,該等值大於531.989px,因此將max-width: 100%調用爲操作。


的Flex項目最小尺寸

注意,默認情況下柔性項目不會縮水超過其內容的大小。

min-width: 0加到#main-content

說明:Why doesn't flex item shrink past content size?


語法錯誤

另外請注意,您的line commenting syntax ...

.grid { 
    width: 500px; // For some reason this ignores max-width when is defined in units. 
    max-width: 100%; 
    height: 200px; 
    background-color: red; 
    color: white; 
    padding: 16px; 
    box-sizing: border-box; 
} 

....和parenthesis around the flex property ...

#sidebar{ 
    min-width:150px; 
    flex(0, 1, 150px); 
    background-color: #7f8c8d; 
} 
#main-content{ 
    width:100%; 
    flex(1, 1, auto); 
    background-color: white; 
} 

正在引起重大問題。

Revised Fiddle

+0

我更新了片段設置'.grid'寬度爲800px,它仍然在跳過'max-width'規則。關於'#main-content'寬度,我怎樣才能給它父母的剩餘正確寬度? (動態地,片段尺寸僅僅是一個例子) –

+1

不是設置'width',而是給'#main-content'設置一個'flex:1'。這將告訴它消耗線上剩餘的空間。 –

+1

@Michael_B來拯救;) – dippas