HTHL使ol标签延伸到底部吗？

如何解决HTHL使ol标签延伸到底部吗？

在网站https://www.app-iam.com的“功能”部分下，我正在使用ol标签列出所有功能。但是，当我扩展列表时，列表向上扩展。我希望列表向下扩展。该怎么办？

ol {
    list-style: none;
    color: coral;
}

ol li {
    font-size: 34px;
    position: relative;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

li span {
    position: absolute;
    line-height: 25px;
    font-weight: 600;
}

<ol>
                    <li>
                        <span>Feature 1</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 2</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 3</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 4</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                </ol>

This is what the screen looks like. You can see that there are two scroll bars because the list is extending upwards. 我希望使列表向下扩展，以使滚动条之一消失而列表向下扩展。

任何帮助将不胜感激！

解决方法

您可以在flex标签上使用flex-direction: column-reverse;和ol，这将颠倒您的列表顺序

ol {
    list-style: none;
    display: flex;
    color: coral;
    flex-direction: column-reverse;
}

ol li {
    font-size: 34px;
    position: relative;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

li span {
    position: absolute;
    line-height: 25px;
    font-weight: 600;
}

<ol>
                    <li>
                        <span>Feature 1</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 2</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 3</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 4</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                    <li>
                        <span>Feature 5</span>
                        <p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
                    </li>
                </ol>