溢出问题

Question

我有一个带有“ overflow-y：hidden”属性的容器元素。但是，这会使“ overflow-x”属性变为“ scroll”而不是可见的。我没有办法让它溢出x-：显示。有什么办法可以使其“ overflow-x”属性为“ visible”，同时保持“ overflow-y：hidden”？

 .container{
    width: 50%;
    height: 100px;
    background-color: blue;
    overflow-y: hidden;
    
  }
  .container div{
    background-color: red;
    width: 120%;
    height: 20px;
  }

 <div class="container">
    <div>
     overflow x div
    </div>
  </div>

Answer 1

您尝试过max-height属性吗？

 .container{
    width: 50%;
    height: 100px;
    background-color: blue;
    overflow: visible;

    
  }
  .container div{
    background-color: red;
    width: 120%;
    max-height: 100%;
    overflow: hidden;

  }

 <div class="container">
    <div>
     overflow x div
    </div>
  </div>

Answer 2

将容器中的宽度更改为100％或固定像素

Answer 3

我在chrome上做到了，并且奏效了。

https://jsfiddle.net/fz7mt3ho/

css

 .container{
    width: 50%;
    height: 100px;
    background-color: blue;
    overflow-y: hidden;
    overflow: visible; /*added line*/
  }
  .container div{
    background-color: red;
    width: 120%;
    height: 20px;
  }