我试图在向下滚动网页的同时粘贴一段文字，但它似乎不起作用。我给它这个css：
.left {
position: sticky; /* doesnt work :( */
top: 0px;
}
这是完整的代码：http://jsfiddle.net/YYPKM/3281/
这个div位于包装器的左侧，但我希望右侧滚动，左侧则粘贴到div的顶部。我已经尝试了很多像固定位置这样的东西，但这似乎是最好的选择，我只是无法让位置发挥作用。
有谁知道我做错了什么？
我认为使用display: table并没有真正解决问题。
您只需添加align-self: flex-start;即可将flexbox元素的高度设置为auto。
.left {
position: sticky;
top: 0;
align-self: flex-start;
}
问题是父母被视为一个弹性容器，它会使儿童成为柔性物品。现在项目显示为弹性项目，它停止工作。如果你从包装中删除display:flex，它的工作原理。
.left和.right指定所需的宽度float: left添加到.left.right的填充设置为.left的宽度看看这里的小提琴：http://jsfiddle.net/YYPKM/3283/
一个选项可能是使用display:table;进行类似的布局：
.wrapper {
display: table;
}
.description {
margin-bottom: 50px;
}
.left {
box-shadow: 0 0 0 5px;
margin-right: 50px;
position: sticky;
/* doesnt work :( if display:table-cell or flex is set or if it is a flex child */
position: -webkit-sticky;
top: 0;
}
.right{
display:table-cell;/*NOTE: do not emulate display on .left */
}
.right,
.left {/*see me*/
box-shadow: 0 0 5px;
}<body>
<h2>
TITLE
</h2>
<div class='description'>
Some words to describe this awesome web page
</div>
<div class="wrapper">
<div class="left">
want to keep this text all the way down
</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div>
<div>43</div>
<div>44</div>
<div>45</div>
<div>46</div>
<div>47</div>
<div>48</div>
<div>49</div>
<div>50</div>
</div>
</div>
</body>