宽度（以像素为单位）忽略最大宽度：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