粘性 CSS 设置不起作用，因为祖先 div 未填充可用高度

Question

我有 2 列，其中右列的内容较短。在右栏的顶部，我想要一个粘性行。但是，粘性行在右列末尾滚出屏幕。这是代码：

<div id="container">
  <div id="column1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div id="column2">
    <div id="column2-head">
      This should be sticky
    </div>
    <div id="column-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

和样式：

#column1 {
  width: 20%;
}
#column2 {
  width: 80%;
}
#column1, #column2 {
  float: left;
  display: inline-block;
}
#column2-head {
  top: 0;
  position: sticky;
  background-color: yellow;
}

见jsFiddle。

所以问题是，我怎样才能将 column2 高度设置为可用 space 而无需显式设置高度。我尝试为 column2 设置“高度：100；溢出：隐藏”，但没有帮助。

Answer 1

你可以使用 flex:

#container{
    display: flex;  
}
#column1 {
  width: 20%;
}
#column2 {
  width: 80%;
}

#column2-head {
  top: 0;
  position: sticky;
  background-color: yellow;
}

<div id="container">
  <div id="column1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div id="column2">
    <div id="column2-head">
      This should be sticky
    </div>
    <div id="column-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

粘性 CSS 设置不起作用，因为祖先 div 未填充可用高度

Sticky CSS setting do not work because the ancestor div do not fill the available height

html

css

sticky