javascript - 如何确保 div 中的内容不会被附加到 div 底部的粘性元素 chop ？

Question

我有一个包装器，它本质上是一个 View 更多的容器。我有说明确保内容不会被附加到包装底部的“查看更多”div chop 。

我不太确定如何解决此问题以确保内容不会被切断。这是默认包装器。你可以看到 children 是如何开始被切断的:

这是展开的包装器。它仍然被切断，所以我知道我遇到了一些 CSS 问题:

React 中的通用包装器结构是这样的:

<FieldWrapperStyle>
  <div>
    {this.props.children}
    <ExpandBtn /> //this is a span
  </div>
</FieldWrapperStyle>

这是样式组件中的包装器:

export const FieldWrapperStyle = styled(Row)`
    position: relative;
    height: calc((100vh - 255px) / 4);
    .col-md-6 {
      max-width: 100%;
      flex: 0 0 100%;
    }
    .field-body {
      transition-timing-function: ease-in;
      background: #fff;
      height: inherit;
      overflow: hidden;
      padding: 1rem !important;
      z-index: 0;
      width: 100%;
        &.expand {
        box-shadow: 0 10px 30px #999;
        position: absolute;
        z-index: 999;
        min-height: 400px;
        overflow-y: hidden;
            &.expBottom {
                bottom: 0px;
                //top: auto;
            }
        }
    }
`;

这是从内部到底部的 ExpandBtn 跨度:

export const ExpandBtn = styled.span`
    background: none;
    bottom: 0;
    left: 0;
    padding: 15px 15px 5px;
    position: absolute;
    width: 100%;
    cursor: pointer;
    margin: 0 auto;
    text-align: left;
    background-image: linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.6),#fff,#fff,#fff);
    z-index: 780;
    display: flex;
    justify-content: flex-end;
    &:after {
      border-style: solid;
      border-width: 7px 5px 0;
      display: inline-block;
      height: 0;
      margin: 6px 5px;
      width: 0;
    }
`;

任何想法都会非常有帮助!谢谢。

Answer 1

尝试从 FieldWrapperStyle 中删除 overflow: hidden 属性。

overflow 属性指定当内容溢出元素的框时应该发生什么。当它设置为 hidden 时，内容被剪裁。