flexbox 元素上的绝对位置

Question

我正在尝试在 1280 像素的最大宽度容器内以 1.5% 的右边距右对齐绝对元素 (#header-supporter-cont)（绝对与图像重叠）。如果它是一个相对元素，这将非常容易，但作为绝对元素，我无法实现这一点。

作为旁注，我正在尝试在 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;
}

演示：

• 原始的，非弹性盒：http://codepen.io/ourcore/pen/ggoebB
• 无法正常工作的弹性框：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;}