如何删除弹性项目的底部 space？

Question

我有以下布局：

export const NewsLetterContainer = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: absolute;
  background-color: white;
  top: 64px;
  padding: 64px 64px 64px 64px;
  width: 808px;
  height: 360px;
  @media ${query({ from: 'xs', to: 'sm' })} {
    padding: 32px 32px 32px 32px;
    top: 48px;
    bottom: 48px;
    right: 16px;
    left: 16px;
    width: auto;
    height: auto;
  }
`;


  const Information = styled.div`
    display: flex;
    flex-basis: 46%;
    flex-grow: 1;
    flex-direction: column;
    margin-right: 40px;
    @media ${query({ from: 'xs', to: 'sm' })} {
      flex-basis: 100%;
      margin-right: 0px;
      flex-grow: 0;
    }
  `;
  const Interaction = styled.div`
    display: flex;
    flex-basis: 48%;
    flex-grow: 1;
    flex-direction: column;

    @media ${query({ from: 'xs', to: 'sm' })} {
      flex-basis: 100%;
      flex-grow: 0;
    }
  `;

呈现如下：

  <NewsLetterContainer>
    <Information>
      <div>
        <StyledTitle size={3}>{TitleTxt}</StyledTitle>
        <StyledInformationText>
          {t('newsletter.discounttxt', {
            percentoff: t('price.percentoff', { percent: 10 })
          })}
        </StyledInformationText>
      </div>
    </Information> ----- HUGE MARGIN BETWEEN HERE
    <Interaction>
        <RvForm postFunc={PostSubscription} {...props} />
      <Information>
        <StyledLegaltext>{PrivacyTxt}</StyledLegaltext>
      </Information>
    </Interaction>
  </NewsLetterContainer>

这很好用，但我在移动设备的底部有一个边距：

如何摆脱巨大的保证金？

Answer 1

第一次提问就能找到答案总是很棒。

简单的加上这个：

align-content: flex-start;

到集装箱。默认为拉伸并导致额外的 space.

如何删除弹性项目的底部 space？

How to remove bottom space of flex-item?

css

reactjs

styled-components