Абсолютное положение элемента flexbox

Question

Я пытаюсь выровнять по вертикали абсолютный элемент (#header-supporter-cont) (абсолютное совпадение с изображением) с 1,5% правым краем в контейнере максимальной ширины 1280 пикселей. Это было бы довольно легко, если бы это был относительный элемент, но как абсолютный, я не смог этого добиться.

Как примечание стороны, я пытаюсь сделать это в Flexbox, потому что просто установка right: 1.5%, как я первоначально сделал, не выравнивает содержимое в #header-supporter-cont с остальными 1280px горизонтальных краев + страницы, так как он считает от края к краю.

HTML:

<header id="header"> 
    <div id="header-cont"> 
    <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Header%20Image&w=1920&h=200" /></a> 
    <div id="header-supporter-cont"> 
     <div id="header-supporter"> 
     <div id="header-supporter-text"> 
      Image text here 
     </div> 
     <a href="#" target="_blank"><img src="https://www.aexp-static.com/nav/ngn/img/logo_bluebox_1x.gif" /></a> 
     </div> 
    </div> 
    </div> 
</header> 

CSS:

#header { 
    margin: 0; 
    width: 100%; 
    height: auto; 
    position: relative; 
} 
#header #header-cont a { 
    display: block; 
} 
#header #header-cont a img { 
    display: block; 
    width: 100%; 
    max-height: 200px; 
    object-fit: cover; 
} 
#header #header-cont #header-supporter-cont { 
    margin: 0 auto; 
    max-width: 1280px; 
    margin: 0 1.5%; 
    position: relative; 
} 
#header #header-cont #header-supporter-cont #header-supporter { 
    display: flex; 
    flex-direction: row; 
    align-items: flex-end; 
    position: absolute; 
    bottom: 20px; 
    right: 0; 
} 
#header #header-cont #header-supporter-cont #header-supporter #header-supporter-text { 
    padding-bottom: 5px; 
    font-size: 0.75em; 
} 
#header #header-cont #header-supporter-cont #header-supporter #header-supporter-text span { 
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); 
} 
#header #header-cont #header-supporter-cont #header-supporter a { 
    display: block; 
} 
#header #header-cont #header-supporter-cont #header-supporter a img { 
    width: 55px; 
} 

Demos:

• Оригинал, не Flexbox: http://codepen.io/ourcore/pen/ggoebB
• нефункционирующих Flexbox: http://codepen.io/ourcore/pen/oBpqqy

Answer 1

Попробуйте изменить направление гибкого для flex-direction: column;

#header-supporter { 
       display: flex; 
       flex-direction: column; 
       align-items: flex-end; 
       position: absolute; 
       bottom: 20px; 
       right: 0;}