寬度（以像素爲單位）忽略最大寬度：100％

Question

我在width和max-width之間存在一個問題，該元素在具有祖父母柔性定位容器的元素中工作。

當我在這個元素中使用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。

Answer 1

您的貨櫃（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