在溢出的父元素中，子元素的样式位于自身底部答案

【问题标题】：Child's styling to the bottom of itself within an overflowing parent element在溢出的父元素中，子元素的样式位于自身底部
【发布时间】：2021-08-17 12:43:07
【问题描述】：

我有一个父级，它的溢出-y 属性设置为自动。

#parent {
position: relative;

overflow-x: hidden;
overflow-y: auto;
}

然后我有一个比窗口大的子元素，它被父元素溢出，但子元素的样式没有溢出。

如何让孩子的样式自行溢出？

【问题讨论】：

标签： html css reactjs sass

【解决方案1】：

你想要这样的东西吗？

#parent {
position: relative;

overflow-x: hidden;
overflow-y: auto;
}

#child{
  width: 100%;
  overflow-x: scroll;
}

#child div {
  width: 120%;
}

<div id="parent">
  <div id="child">
    <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, qui sapiente, architecto minima voluptatibus illo pariatur necessitatibus doloremque, officia odio nesciunt quod beatae molestias autem aliquam mollitia tenetur! Nisi, soluta!
      
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas illum iure perspiciatis sint laudantium laborum vero ipsum, mollitia possimus consequuntur odio ullam veniam laboriosam culpa voluptatem neque, suscipit rem! Laboriosam.
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur placeat architecto dolores expedita quod ad? Praesentium quibusdam commodi cumque natus quos quam eius animi et reprehenderit tempora, ea, voluptas repellendus.
    </div>
  </div>
</div>

【讨论】：

不是我想要的，但我的解决方案是使用 height: auto，不过感谢您的帮助。