How to remove bottom space of flex-item?

Question

I have the following layout:

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;
    }
  `;

rendered like this:

  <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>

This works fine BUT i get a margin at the bottom in mobile:

How do I get rid of the huge margin?

Are you sure it’s “margin”, which in dev tools is shown as orange? Or is it just the effects of those flex settings? What happens if you adjust flex grow or other flex options? — Alexander Staroselsky, Feb 17 '22 at 23:57
Been at this for a while. Tried changing a bunch of the flex settings but nothing removes the space. You are correct it's not a margin exactly its space between items, been experimenting with the gap prop but its the first child that has the massive space below for some reason — ThunD3eR, Feb 18 '22 at 00:10

score 1 · Accepted Answer · answered Feb 18 '22 at 00:37

1

Always wonderful that you find an answer when asking first.

Simply put add this:

align-content: flex-start;

To the container. default is stretch and causes the extra space.

answered Feb 18 '22 at 00:37

ThunD3eR

3,216
5
50
94

How to remove bottom space of flex-item?

1 Answers1