overflow-y is not working in div after width breakpoint

Question

I’m trying to set overflow-y: auto after a div breakpoint, but it’s not working as I imagined. I have a div-container where has a header, a div wrapper where this has two other (one for a Fields and another for a photo gallery). 1200px max-width breakpoint for div-wrapper flex-direction: colunm And that’s where I wanted the scroll to show the IELDS and gallery correctly. Project is done in React and Styled-Components.

index.tsx

    <S.Container>
      <S.Header>
        <S.LeftHeader>
          <S.ConstructionCompanyLogo src={thirdPartyCard.capa.sizes.bola} />
          <S.DescriptionContainer>
            <S.Title>{thirdPartyCard.titulo}</S.Title>
            <S.Description>{thirdPartyCard.endereco}</S.Description>
          </S.DescriptionContainer>
        </S.LeftHeader>

        <S.CloseIcon onClick={onClose}>
          <AiOutlineClose size={24} />
        </S.CloseIcon>
      </S.Header>

      <S.ContentContainer>
        <S.Fields>
          <S.MainInfoContainer>
            <S.LeftMainSide>
              <S.MainTitle>{thirdPartyCard.titulo}</S.MainTitle>
              <S.MainSubtitle>{thirdPartyCard.subtitulo}</S.MainSubtitle>
              <S.Price>{formatBRL(thirdPartyCard.valor)}</S.Price>
              <S.StatusInfo>
                <p>Disponível</p>
              </S.StatusInfo>
            </S.LeftMainSide>

            <S.RightMainSide>
              <S.SpacesInfoContainer>
                <S.Dormitories>
                  {thirdPartyCard.dormitorios === null
                    ? '0'
                    : thirdPartyCard.dormitorios}
                </S.Dormitories>
                <S.DormitoriesName>Dorm.</S.DormitoriesName>
              </S.SpacesInfoContainer>
              <S.SpacesInfoContainer>
                <S.Suits>
                  {thirdPartyCard.suites === null ? '0' : thirdPartyCard.suites}
                </S.Suits>
                <S.SuitsName>Suítes</S.SuitsName>
              </S.SpacesInfoContainer>
              <S.SpacesInfoContainer>
                <S.ParkingSpacies>
                  {thirdPartyCard.parking_spaces === null
                    ? '0'
                    : thirdPartyCard.parking_spaces}
                </S.ParkingSpacies>
                <S.ParkingName>Vagas</S.ParkingName>
              </S.SpacesInfoContainer>
            </S.RightMainSide>
          </S.MainInfoContainer>

          <S.ChoseTitleContainer>
            <S.ChoseText>
              ESCOLHA 1 DAS OPÇÕES DE TÍTULO PARA SEU ANÚNCIO
            </S.ChoseText>
            <S.InputDiv>
              <S.InputTitle placeholder="Título personalizado" />
              <FaPencilAlt />
            </S.InputDiv>
          </S.ChoseTitleContainer>

          <S.ChoseTitleContainer>
            <S.ChoseText>
              ESCOLHA 1 DAS OPÇÕES DE TÍTULO PARA SEU ANÚNCIO
            </S.ChoseText>
            <S.InputDiv>
              <S.InputTitle placeholder="Título personalizado" />
              <FaPencilAlt />
            </S.InputDiv>
          </S.ChoseTitleContainer>

          <S.ChoseTitleContainer>
            <S.ChoseText>
              ESCOLHA 1 DAS OPÇÕES DE TÍTULO PARA SEU ANÚNCIO
            </S.ChoseText>
            <S.InputDiv>
              <S.InputTitle placeholder="Título personalizado" />
              <FaPencilAlt />
            </S.InputDiv>
          </S.ChoseTitleContainer>

          <S.DefaultDescriptionContainer>
            <S.DefaultTitle>Descrição padrão</S.DefaultTitle>
            <RichText
              description={replaceEscapeCharactersWithLineBreak(
                thirdPartyCard.endereco_text
              )}
              //   card.advertisement_description
              // )}
              // disable
              // data-test-id="advertisement_description"
              // name="advertisement_description"
              // placeholder="Informe a descrição"
              // onBlur={formik.handleBlur}
              // onChange={editorText =>
              //   formik.setFieldValue('advertisement_description', editorText)
              // }
              // value={formik.values.advertisement_description}
            />
          </S.DefaultDescriptionContainer>
        </S.Fields>

        <S.Gallery>
          <S.GalleryLabel>Galeria:</S.GalleryLabel>
          <S.AreaPhotos>
            <Gallery
              files={thirdPartyCard.files}
              coverPhoto={thirdPartyCard.capa.url}
            />
          </S.AreaPhotos>
        </S.Gallery>
      </S.ContentContainer>
    </S.Container>
  )

Styles.:

export const Container = styled.div` <--- container geral
  width: 85vw;
  height: 85vh;
  background: #fff;
  border-radius: 15px;
  position: relative;
`

export const ContentContainer = styled.div`. <--- container-wrapper
  display: flex;
  justify-content: space-between;

  height: calc(85vh - 60px);

  @media (max-width: 1200px) {
    flex-direction: column;
    max-height: calc(85vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
  }
`

export const Fields = styled.div` <-- container-fields
  padding: 4px 20px;
  overflow-y: auto;
  @media (max-width: 1200px) {
    width: 100%;
    overflow-y: hidden;
  }
`


export const Gallery = styled.div` <-- container gallery
  width: 50%;
  padding: 4px 8px;
  overflow-y: auto;

  @media (max-width: 1200px) {
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
  }
`

the result is this: