只用flexbox乘以bested DIV，inner div全高 - 可能嗎？

-1

我有一個複雜的佈局，其中有一個由動態高度的JavaScript生成的div，他被稱爲「.outer」。這個div有一些嵌套的div，最後導致一個名爲「.target」的div。我需要目標div處於「高度」的高度。我不想解決內部div，因爲他們是由我的JS框架生成的不同標記。只用flexbox乘以bested DIV，inner div全高 - 可能嗎？

我不想設定通過JS的高度，我無法設置位置，絕對的，也不在相對「.outer」

HTML：

<div class="outer"> 
    <div class="inner"> 
    <div class="anotherInner"> 
     <div class="target"> 
     This div should be outer's height no matter how many divs are between target and outer like ".inner" 
     </div> 
    </div> 
    </div> 
</div>

CSS：

body { 
    background: #000; 
} 

.outer { 
    background: #333; 
    height: 500px; /* this is not a pixel value, only for example*/ 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    align-content: stretch; 
    align-items: stretch; 
} 

.inner { 
    background: #555; 
} 

.target { 
    background: #777; 
    order: 0; 
    flex: 1 1 auto; 
    align-self: auto; 
}

示例：

http://codepen.io/anon/pen/akwWZK?editors=1100

來源

2016-07-04 CaKa

不可能使用flexbox。 Flexbox僅適用於'display：flex'父項和直接子項。最好的辦法是使用'position：relative'到'.outer'和'position：absolute'到'.inner'。 –

在FlexBox中執行此操作的唯一可能方法是通過添加顯示來解決.inner div中的.inner div問題：flex;給他們。

我創建了一個工作示例爲您的位置：http://codepen.io/mattpark22/pen/rLwwZp

要 '.inner' 添加：

display: flex;

要 '.TARGET' 添加：

height: 100%;

要' .outer'change，flex-direction爲：

flex-direction: row;

我的codepen示例還清理了一些不需要的CSS。

來源

2016-07-04 15:23:32 mattpark22

如果這是您的問題的可接受的解決方案，請您可以將此標記爲接受的答案。謝謝。 – mattpark22

只用flexbox乘以bested DIV，inner div全高 - 可能嗎？

回答

相關問題