如何在HTML中使子元素宽度超出父元素但保留纵向滚动条且隐藏横向滚动条?

Question

html中如何实现子元素宽度可以超出父元素,效果就是高度不超出父元素而是显示滚动条,横向不显示滚动条?

<div class="parent">
        <div class="child">这是一个很长的文本，‌确保它在纵向超出父元素。‌</div>    
</div>
<style>
.parent{
    background:#ccc;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    position: relative;
}
.child{
    width: 300px;
    background-color: lightblue;
}
</style>

大概就像下面这种效果
图片的效果是子元素使用 position:fixed 实现的,并不符合需要的效果
经过我测试,只要父元素添加了 overflow-x:hidden 就无法让子元素超出父元素
去除 overflow 属性可以超出父元素但是纵向滚动条又没了

Answer 1

多层div的嵌套的方式，但是这样会有 .child 元素会有滚动条出现。
比如说👇

<div class="parent">
  <div class="child">这是一个很长的文本，‌确保它在纵向超出父元素。‌</div>    
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>
<style>
.parent{
  width: 200px;
  height: 200px;
  background: #ccc;
  border: 1px solid black;
  position: relative;
  overflow-x: hidden;
}
.child{
  width: 100%; 
  background-color: lightblue;
  word-break: keep-all;
  white-space: nowrap;
  overflow-x: scroll;
}
</style>

如果想要隐藏滚动条的话，就会比较麻烦。因为现在没有一个非常好的自定义滚动条样式的属性（各家浏览器对于 scrollbar 相关的属性的支持并不是特别友好）

所以我们一般想要做滚动条隐藏的需求，会再套一层外部容器去做垂直方向的超出隐藏来隐藏滚动条。
比如说👇：

<div class="parent">
  <div class="hide-scrollbar">
    <div class="child">这是一个很长的文本，‌确保它在纵向超出父元素。‌</div>   
  </div>
  <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>
<style>
.parent{
  width: 200px;
  height: 200px;
  background: #ccc;
  border: 1px solid black;
  position: relative;
  overflow-x: hidden;
}
.child{
  width: 100%; 
  line-height: 20px;
  padding-bottom: 30px;
  background-color: lightblue;
  word-break: keep-all;
  white-space: nowrap;
  overflow-x: scroll;
}
.hide-scrollbar {
  width: 100%;
  height: 20px;
  overflow: hidden;
}
</style>