iPad上的柔性柱塌陷

Question

這個問題之前已經提出過很多次，但是flex模型已經發生了巨大變化，我仍然無法找到工作解決方案。

技術問題

• 當對象的彎曲方向被設定爲列，所有對象崩潰的高度（即高度：0）
• 問題似乎限於iProducts。據我可以告訴Flex在所有瀏覽器桌面和Android上按預期工作。
• 這個問題並不限於Safari，因爲在iPad和Firefox上測試時，問題出現在Chrome和Firefox （IOS 10.3.3）上。

這個例子演示了這個問題。當寬度小於600像素時，行切換到列，問題將會出現。

.InputRow, 
 
.InputItem, 
 
.InputWrap { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.InputRow, 
 
.InputItem { 
 
    -ms-flex-flow: wrap; 
 
    flex-flow: wrap; 
 
} 
 

 
.InputItem, 
 
.InputWrap { 
 
    -ms-flex: 1 1 0%; 
 
    -webkit-box-flex: 1; 
 
    flex: 1 1 0%; 
 
} 
 

 
.InputWrap { 
 
    position: relative; 
 
    -ms-flex-pack: end; 
 
    -webkit-box-pack: end; 
 
    justify-content: flex-end; 
 
    -ms-flex-direction: column; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    flex-direction: column; 
 
    margin: 0 10px 10px 0; 
 
} 
 

 
@media all and (max-width:600px) { 
 
    .InputRow { 
 
    -ms-flex-direction: column; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    flex-direction: column; 
 
    -ms-flex-align: stretch; 
 
    -webkit-box-align: stretch; 
 
    align-items: stretch; 
 
    } 
 
} 
 

 
.Bx { 
 
    background: #b00; 
 
    border: 5px solid #333; 
 
}

<div class="InputRow"> 
 
    <div class="InputItem"> 
 
    <div class="InputWrap"> 
 
     <div class="Bx">Box 2</div> 
 
    </div> 
 
    </div> 
 
    <div class="InputItem"> 
 
    <div class="InputWrap"> 
 
     <div class="Bx">Box 2</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="InputRow"> 
 
    <div class="InputItem"> 
 
    <div class="InputWrap"> 
 
     <div class="Bx">ROW 2</div> 
 
    </div> 
 
    </div> 
 
</div>

這可能是與嵌套結構我在這裏有設置可能存在問題，但正如我說，這個問題被隔離。

Answer 1

您沒有在容器或物品上定義任何高度。

然而，你告訴項目使用自由空間：

.InputItem, 
.InputWrap { 
    flex: 1 1 0%; 
} 

這個規則分解爲：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0%

flex-grow: 1規則在寬屏幕上可以正常工作（flex-direction: row），因爲容器是塊級元素（即寬度：100％）。

但在較小的屏幕（flex-direction: column），height（經由flex-basis）設置爲0%，flex-grow: 1已經沒有多餘的空間來工作，和容器高度（不像它的寬度），默認爲auto（含量高）。

所以我認爲解決的辦法是增加容器或物品的高度。