有身高的父母：自己没有孩子的身高

Question

您好，我有一个父级的绝对位置和身高：self 与孩子的身高不一样：

css:

const UserProfile = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.5rem;
  cursor: pointer;
  position: relative;
  & .user_text {
    cursor: pointer;
    display: flex !important;
    flex-direction: column;
    padding-right: 0.75rem !important;
    span:first-of-type {
      font-size: 1rem;
      color: #b5b5c3 !important;
      font-weight: 500 !important;
      text-align: right !important;
    }
    span:last-of-type {
      font-size: 1rem;
      color: #464e5f !important;
      font-weight: 600 !important;
      text-align: right !important;
    }
  }
  & .user_avatar {
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s;
    width: 45px;
    z-index: 1;
    img {
      min-height: 100%;
      object-fit: cover;
      -o-object-fit: cover;
      width: 100%;
    }
  }
`;
const UserCanvas = styled.div`
  position: absolute;
  min-width: 10rem;
  display: ${props => (props.isOpen ? "block" : "none")};
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-color: rgba(120, 130, 140, 0.13);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  top: 100%;
  bottom: 0;
  font-size: 1rem;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0.25rem;
  & .test {
    min-width: 10rem;
    height: 200px;
  }
`;

jsx:

 <UserProfile onClick={() => setOpen(!isOpen)}>
      <div className="user_text">
        <span>SpiriT</span>
        <span>Web Developer</span>
      </div>
      <div className="user_avatar">
        <img src={LogoImage} />
      </div>
      <UserCanvas isOpen={isOpen}>
        <div className="test">a</div>
      </UserCanvas>
    </UserProfile>

示例：

https://codesandbox.io/s/youthful-hooks-ceo85?file=/src/App.js:743-2099

基本上我需要绝对位置和自动高度的 div 来跟随你孩子的高度

Answer 1

将父组件的display 更改为table，将table-row 更改为这样：

const UserCanvas = styled.div`
  // ... other properties
    display: ${props => (props.isOpen ? "table" : "none")};
  & .test {
    min-width: 10rem;
    height: auto;
    display: table-row;
  }
`;

或者，您可以将height: max-content; 添加到父组件。