在子div最大宽度不起作用（父div有flex显示）

Question

我的html代码非常简单，只是为了测试css max-width和flexbox显示。我的目标是将按钮宽度设置为190px，但不起作用。如果我删除我的.header中的显示CSS，它将工作。 请解释我这里有什么问题？ 感谢

这里是我的html代码：

.header { 
 
    padding:0; 
 
    background-color: #16325C; 
 
    height: 60px; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
} 
 

 
.header ul { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.menu { 
 
    -webkit-align-self: center; 
 
    -ms-flex-item-align: center; 
 
    align-self: center; 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 
.menu > .dropdown { 
 
    display: block; 
 
    max-width: 190px; 
 
} 
 
.menu > .dropdown > button { 
 
    background-color: white; 
 
    width: 100%; 
 
    text-align: left; 
 
    color: #16325C; 
 
}

<div class="header"> 
 
    <ul class="left"> 
 
    <li class="menu"> 
 
     <div class="dropdown"> 
 
     <button> 
 
      Text 
 
     </button> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

max-width工作，它定义宽度的盒子可以增长的最大数量。您正在搜索width，因为你在提问句：

我的目标是有按钮的宽度为190px，但它不工作

所以尝试：

.header { 
 
    padding:0; 
 
    background-color: #16325C; 
 
    height: 60px; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
} 
 

 
.header ul { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.menu { 
 
    -webkit-align-self: center; 
 
    -ms-flex-item-align: center; 
 
    align-self: center; 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 
.menu > .dropdown { 
 
    display: block; 
 
    width: 190px; 
 
} 
 
.menu > .dropdown > button { 
 
    background-color: white; 
 
    width: 100%; 
 
    text-align: left; 
 
    color: #16325C; 
 
}

<div class="header"> 
 
    <ul class="left"> 
 
    <li class="menu"> 
 
     <div class="dropdown"> 
 
     <button> 
 
      Text 
 
     </button> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

您将display: flex;分配给DIV .header这意味着此是柔性容器，<ul class="left">是其中的唯一柔性项目，*不是其中的li元素（直接父/子关系）。这可能是您的问题（或至少一个）的原因。