`position：absolute` with` bottom：0`は親を表示していません：flex？

Question

私は容器の底にクラスsidebarでdivを修正したいのですが、bottom:0とposition: absoluteはdisplay: flexを有する容器で作業されていません。

この問題を解決するにはどうすればよいですか？

コード：https://jsfiddle.net/zgmg48z1/1/

/*******************page layout**************************/ 
 
.container{ 
 
    width: 100%; 
 
    background-color: #d5d5d5; 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
.sidebarcontainer{ 
 
    width: 250PX; 
 
    /*height: 6000px;*/ 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    padding-right: 2px; 
 
} 
 
.innersidebarcontainer{ 
 
    position: relative; 
 
     width: 100%; 
 
    height: 100%; 
 
} 
 
.sidebar{ 
 
    width: 243px; 
 
    background-color: white; 
 
    height: 500px; 
 
    /*top: 1px;*/ 
 
    /*bottom: 0;*/ 
 
    /*position: absolute;*/ 
 
} 
 
.mainpage{ 
 
    width: calc(100% - 250px); 
 
    padding: 5px; 
 
    padding-left: 2px; 
 
    height: 600px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 
.page{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: baseline; 
 
    align-content: flex-start; 
 
} 
 
.footer{ 
 
    height: 500px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: #031003; 
 
} 
 
/***************end of pagelayout******************/ 
 
.card{ 
 
    width: 250px; 
 
    /*height: 400px;*/ 
 
    align-self: flex-start; 
 
    margin: 10px; 
 
    display: inline-block; 
 
} 
 
.image{ 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    height: 250px; 
 
} 
 
.image img{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
     <div class="sidebarcontainer"> 
 
      <div class="innersidebarcontainer"> 
 
        <div class="sidebar"> 
 
       </div> 
 
      </div> 
 
     </div><!-- 
 
    --><div class="mainpage"> 
 
     <div class="page"> 
 
     <h1>something in the page</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"></div>

Answer 1

これを試してみてください：ここ

.sidebarcontainer{ 
    /*OTHER STUFF*/ 
     align-self: flex-end; 
    } 

説明：https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-14

「これはデフォルトの配置（またはことができます1つはalign-itemsで指定されています）を個々のフレックスアイテムに対してオーバーライドします。

Answer 2

サイドバーをコンテナの下部に配置する場合は、サイドバーコンテナにalign-self: flex-endを使用できます。

この場合、サイドバーで絶対位置を使用する必要はありません。しかし、私はあなたがしようとしていることを確信していません、おそらく100％の高さ（コンテナの）サイドバーのコンテナを持って、サイドバーの内容をボトムに合わせる必要があります。必要な場合は、サイドバーコンテナの高さと相対位置を設定できます。その後、サイドバーの子にposition: absoluteとbottom: 0を使用します。

/*******************page layout**************************/ 
 
.container{ 
 
    width: 100%; 
 
    background-color: #d5d5d5; 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 

 
.sidebarcontainer{ 
 
    width: 250PX; 
 
    /*height: 6000px;*/ 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    /* Add align-self: flex-end to the sidebar-container */ 
 
    align-self: flex-end; 
 
    padding: 5px; 
 
    padding-right: 2px; 
 
} 
 

 
.innersidebarcontainer{ 
 
    position: relative; 
 
     width: 100%; 
 
    height: 100%; 
 
} 
 

 
.sidebar{ 
 
    width: 243px; 
 
    background-color: white; 
 
    height: 500px; 
 
    /*top: 1px;*/ 
 
    /*bottom: 0;*/ 
 
    /*position: absolute;*/ 
 
} 
 
.mainpage{ 
 
    width: calc(100% - 250px); 
 
    padding: 5px; 
 
    padding-left: 2px; 
 
    height: 600px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 
.page{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: baseline; 
 
    align-content: flex-start; 
 
} 
 
.footer{ 
 
    height: 500px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: #031003; 
 
} 
 
/***************end of pagelayout******************/ 
 
.card{ 
 
    width: 250px; 
 
    /*height: 400px;*/ 
 
    align-self: flex-start; 
 
    margin: 10px; 
 
    display: inline-block; 
 
} 
 
.image{ 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    height: 250px; 
 
} 
 
.image img{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
     <div class="sidebarcontainer"> 
 
      <div class="innersidebarcontainer"> 
 
        <div class="sidebar"> 
 
       </div> 
 
      </div> 
 
     </div><!-- 
 
    --><div class="mainpage"> 
 
     <div class="page"> 
 
     <h1>something in the page</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"></div>

Answer 3

これとまったく同じ問題が、最近私に起こりました。私の場合、それはフレックスの欠点でも最終的にはポジショニングでもなく、別のクラスがカスケードしていて、要素の絶対的な位置に影響を与え、新しい値が機能していないように見えます。