测试您的解决方案，我结束了这个片段：

.mywrapper {
    overflow-x: scroll;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">

<!-- first col -->
<div class="col-4" style="background-color:yellow">
  <p class="text-end">
    This text is ok, should be visible by default.
  </p>
</div>

<!-- second col -->
<div class="col-4">
  <div class="mywrapper" style="background-color:red;">
    <div id="widelement" style="width:5000px;">
      <p class="text-end">
        This text is inside a 5000px div.
        I would like the div .mywrapper has a horizontal scrollbar.
        I mean, just a scrollbar for the div, not for the whole page.
        The div should be inside de col-6.
        On scrolling right, this text should become visible.
      </p>
    </div>            
  </div>
</div>

<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
  <p class="">
    My left div should have a scroll bar.
  </p>
</div>

</div>
</div>

事实证明，您所建议的代码是有效的，因此，有些东西阻止了它在您的终端工作，这可能是以下一个或多个原因：

• 客户端高速缓存（您的浏览器临时存储了您的css和js文件，以便在您每次加载页面时不必下载它们，并且在您测试时，缓存的旧版本CSS可能是由您的浏览器通过本地缓存文件加载的，而不是从服务器下载的），Ctrl+F5（或者清除浏览器缓存，或者在新打开的匿名窗口中测试）可以解决这个问题
• 服务器端缓存（CloudFlare或其他一些服务器端软件定期生成静态文件，并在页面加载时将这些文件发送到浏览器，而不是在每个请求时生成响应），在这种情况下，您需要在测试时清除服务器端缓存
• 编辑代码时忘记保存代码
• 您忘记在服务器上部署它
• 编辑了错误的文件
• 编辑了正确的文件，但错误地未将其包含在HTML中
• 某些更高优先级的CSS规则阻止应用overflow-x规则（参见https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）

因此，您的想法是正确的，但有些东西阻止了它提供您所期望的好处。因此，这个问题是您项目中的一些技术问题，您需要解决上面列出的潜在问题。如果您的想法仍然不起作用，那么您需要用更多信息编辑您的问题，并让回答者（包括我自己）了解更多信息。