如何在溢出时垂直滚动内容？答案

【问题标题】：How to vertically scroll content on overflow?如何在溢出时垂直滚动内容？
【发布时间】：2022-01-17 22:12:33
【问题描述】：

我有一个 div，如果内容默认水平溢出。我怎样才能让它垂直滚动。这是我的html（我正在使用tailwind）

<section class="flex flex-col lg:flex-row">
    <div class="w-full sm:w-3/4 lg:w-3/5 py-20 flex flex-col gap-y-10 items-center justify-center px-10">
        <div class="flex items-center justify-between w-full">
            <img src="https://img.icons8.com/ios/35/000000/add--v2.png" class="cursor-pointer mr-4" />
            <input type="text" name="title" placeholder="Title" class="flex-1 border-0 outline-none placeholder-gray-600 text-4xl">
        </div>
        <textarea name="article" rows="10" placeholder="Tell your story..." class="flex-1 border-0 outline-none placeholder-gray-600 text-2xl w-full h-auto" id="input-html"></textarea>
    </div>

    <div class="w-full sm:w-1/4 lg:w-2/5 border-l-4 border-gray-400 p-5 overflow-y-scroll" id="output-html"></div>

问题是第二个 div 只是*水平滚动。而不是垂直的。

如何垂直做？

【问题讨论】：

标签： css flexbox overflow tailwind-css

【解决方案1】：

最后我发现了这个问题。问题是我在里面输入了一些愚蠢的字母，比如：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

这导致它不沿 y 轴溢出。在我在其中写了一些有意义的空格分隔内容后，它起作用了！

所以永远不要在你的文本区域中写愚蠢的东西。

【讨论】：

【解决方案2】：

overflow-y-scroll -> 尝试将此类添加到 div。

【讨论】：

该类被添加到父元素的 *second *child 中。我在哪里添加？
一个好的答案将始终包括解释为什么这会解决问题，以便 OP 和任何未来的读者可以从中学习。
发现问题@Tyler2P