CSS 属性“包含：布局”使固定页脚不起作用

Question

我正在开发一个 Ionic 4 应用程序，并且在他们的类中遇到了一个固定位置页脚的奇怪问题.scroll-content。我可以在没有 Ionic 的情况下重现这个问题，所以我从更一般的意义上问这个问题：

我有一个容器元素（在我的例子中由 Ionic 提供），其中包含：

.scroll-content {
    overflow-y: scroll; 
    position: absolute;
    contain: layout size style;
}

再加上一些顶部/底部/左/右值来定位它，它们不会影响问题。

它里面的内容比这个容器高，导致容器滚动，还有一个我用 粘起来的页脚position: fixed。

但是，除非我从属性中删除“布局”值，否则页脚的行为根本不像是粘性的contain。

.scroll-content {
    overflow-y: scroll; 
    position: absolute;
    contain: layout size style;
}

let layout = true;
const container = document.querySelector('.scroll-content');

document.getElementById('toggleLayout').addEventListener('click', (e) => {
    layout = !layout;
    if(layout) container.style.contain = 'size style layout';
    else container.style.contain = 'size style';
    
    e.target.innerHTML = `layout: ${layout}`;
});

.scroll-content {
	contain: layout size style;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
	overflow-y: scroll;
}

li {
  border-bottom: 1px solid #ddd;
  list-style: none;
  padding: 10px;
}

footer {
  background: #eee;
  bottom: 0;
  padding: 20px;
  position: fixed;
  width: 100%;
}

现在我想假设 Ionic 添加这个类是有目的的，所以我不想覆盖它。损坏的position: fixed行为是预期的吗？如果是这样，我可以做些什么来解决这个问题并再次修复我的页脚？