如何讓孩子的div與flex父母的高度相同

我需要三個孩子div的高度彼此相同，並作爲父母的div。一個div的內容被設置爲在用戶交互時改變，並且由此產生的任何高度改變應該推動父母或其他孩子或兩者的高度。我認爲這是可能的與flex。如何讓孩子的div與flex父母的高度相同

我試着實現給出相同問題的答案，但目前爲止沒有運氣。任何人都可以發現我做錯了什麼嗎？我使用的是Firefox，不需要這個在其他瀏覽器中爲這個原型版本工作，但當然，如果它確實如此，它會節省時間。

我已經嘗試'位置：絕對'和'顯示：表'接近長度沒有喜悅。無論如何，我真的會喜歡flex方法。

div#filterRow { 
 
    min-height: 80px; 
 
    display: flex; 
 
    border: 2px solid red; 
 
} 
 

 
div#filterRow div.selectHolder { 
 
    border: 2px solid blue; 
 
    border-right: 0; 
 
    flex: auto; 
 
    height: 100%; 
 
    padding: 10px; 
 
} 
 

 
div#filterRow div.selectHolder div { 
 
    vertical-align: top; 
 
} 
 

 
div#filterRow div.selectHolder:last-child { 
 
    border-right: 1px solid lightgray; 
 
} 
 

 
div#filterRow div h1 { 
 
    margin: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
div#filterRow div div { 
 
    margin-right: 5px; 
 
} 
 

 
div#filterRow div#filters { 
 
    width: 800px; 
 
} 
 

 
div#filterRow div#highlight { 
 
    width: 300px; 
 
} 
 

 
div#filterRow div#granularity { 
 
    width: 400px; 
 
} 
 

 
div.fullwidth { 
 
    width: 100%; 
 
}

<div class="fullwidth dispTR" id="filterRow"> 
 

 
    <div class="selectHolder" id="filters"> 
 
    <h1>Filters longer to make tall</h1> 
 
    </div> 
 
    <div class="selectHolder" id="highlight"> 
 
    <h1>Highlight</h1> 
 
    </div> 
 
    <div class="selectHolder" id="granularity"> 
 
    <h1>Group</h1> 
 
    </div> 
 
</div>

這裏舉例：https://jsfiddle.net/rt80wd6r/2/

感謝您的幫助。我相信這是明顯的。

這裏有其他問題：

HTML5 flexible box model height calculation

make div's height expand with its content

來源

2017-05-02 emma

一個display: flex;元素的子元素將佔用父的高度默認。所以不需要height: 100%;或類似的。

div#filterRow { 
 
    min-height: 80px; 
 
    display: flex; 
 
    border: 2px solid red; 
 
} 
 

 
div#filterRow div.selectHolder { 
 
    border: 2px solid blue; 
 
    border-right: 0; 
 
    padding: 10px; 
 
} 
 

 
div#filterRow div.selectHolder div { 
 
    vertical-align: top; 
 
} 
 

 
div#filterRow div.selectHolder:last-child { 
 
    border-right: 1px solid lightgray; 
 
} 
 

 
div#filterRow div h1 { 
 
    margin: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
div#filterRow div div { 
 
    margin-right: 5px; 
 
} 
 

 
div#filterRow div#filters { 
 
    width: 800px; 
 
} 
 

 
div#filterRow div#highlight { 
 
    width: 300px; 
 
} 
 

 
div#filterRow div#granularity { 
 
    width: 400px; 
 
} 
 

 
div.fullwidth { 
 
    width: 100%; 
 
}

<div class="dispTR" id="filterRow"> 
 

 
    <div class="selectHolder" id="filters"> 
 
    <h2>Filters longer to make tall</h2> 
 
    <p> 
 
     Yo-ho-ho bilge topmast Spanish Main lugger starboard grog blossom crow's nest hang the jib spirits chase guns ballast. Letter of Marque come about bucko schooner Jolly Roger Chain Shot boom topsail case shot salmagundi marooned piracy. American Main hornswaggle topgallant reef rigging schooner quarterdeck sutler coffer long boat jury mast Davy Jones' Locker. Sloop pressgang capstan black spot cackle fruit Nelsons folly cable main sheet plunder ye gibbet parrel. 
 
    </p> 
 
    </div> 
 
    <div class="selectHolder" id="highlight"> 
 
    <h2>Highlight</h2> 
 
    </div> 
 
    <div class="selectHolder" id="granularity"> 
 
    <h2>Group</h2> 
 
    </div> 
 
    
 
</div>

來源

2017-05-02 16:49:53 hungerstar

謝謝！我不能相信我花了多長時間，這個修復是多麼簡單！ – emma

柔性容器上使用align-items: stretch，並刪除明確高度的子項（height: 100%）。

https://jsfiddle.net/rt80wd6r/3/

FYI的方式撓曲作品是它提供了2軸用於對準的物品，在默認情況下的水平和垂直的（但可以通過反轉具有垂直是第一個和水平是第二）。

1軸的設定與justify-content和第二設置與align-items - 所以在這種情況下，我們要伸展在垂直軸上的項目，所以我們使用align-items。

編輯：另一個答案提到align-items: stretch已被默認設置，所以你應該接受，因爲它是更優化。

來源

2017-05-02 16:51:38 smorgs

謝謝你的回答和解釋。我很抱歉不能同時接受！ – emma

如何讓孩子的div與flex父母的高度相同

回答

相關問題