Расположены ли дочерние элементы flexbox таким образом, чтобы их можно было использовать для абсолютного позиционирования своих дочерних элементов?

Я создаю заголовок для своего сайта, который содержит заголовок, список навигационных ссылок и форму поиска. Вся страница оформляется с помощью flexbox, таким образом:

HTML:

 <div id="pagecontainer"> <!--the flex container-->
    <header id="pageheader"><!--the header--><h1>...</h1><!--the heading-->
       <nav><ul>...</ul></nav><!--the navigation-->
       <form>...</form><!--the search--></header>
    <main id="pagemain>...</main><!--the main content area-->
    <footer id="pagemain>...</footer><!--the footer-->
 </div>

CSS

 #pagecontainer {
    display:flex;
    flex-direction:column;
    min-height:100VH;
 }
 #pageheader {
    position:sticky;
    top:0PX;
    ...
 }
 #pagemain {
    flex:1;
    ...
 }
 #pagefooter {
    ...
 }
 #pageheader form {
    position:absolute;
    right:0;
    bottom:0;
    ...
 }

Проблема, с которой я столкнулся, заключается в том, что в Firefox поле поиска расположено правильно - в правом нижнем углу заголовка - но в Chrome (и в других браузерах Webkit) оно находится в правом нижнем углу страницы. Согласно статье MDN о позиции (https://developer.mozilla.org/en-US/docs/Web/CSS/position), абсолютно позиционированные элементы  «позиционируются относительно ближайшего позиционированного предка. Если позиционированный предок не существует, используется начальный контейнер». Итак, очевидно, что Firefox видит элементы с гибким позиционированием как позиционируемые, но Webkit видит их как находящиеся в обычном потоке. Какое поведение «правильное»? и есть ли запасной вариант, который я могу использовать вместо этого?

Спасибо Том