在子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元素（直接父/子關係）。這可能是您的問題（或至少一個）的原因。