Je vais essentiellement créer une accessibilité pour augmenter la taille de la police, mais je ne sais pas comment y parvenir : fondamentalement, j'ai besoin que mon div augmente en hauteur lorsque la taille de mon texte dépasse la largeur maximale, quelque chose comme ceci: entrez la description de l'image ici

Pour le moment si j'essaye ça j'ai ça :

enter image description here


Passe ma largeur maximale et n'augmente pas en hauteur comme un "saut de ligne" comme dans le code gif précédent :

<ContainerNav>
    <Content>
        <Nav>
            <ul>
                <li>
                    <a href="#home">home</a>
                </li>
                <li>
                    <a href="#homex">home2</a>
                </li>
                <li>
                    <a href="#homexv">home3</a>
                </li>
                <li>
                    <a href="#homexv">home4</a>
                </li>
                <li>
                    <a href="#homexv">home5</a>
                </li>
                <li>
                    <a href="#homexv">home6</a>
                </li>
            </ul>
        </Nav>
    </Content>
</ContainerNav>

Css:

 const flex = props => css`
  display: flex;
  flex-direction: ${props.flexdirection};
`;



const flexAlignCenter = css`
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
`;

 const mxw80 = css`
  height: 100%;
  margin: 0 auto;
  max-width: 80rem !important;
  width: 80rem !important;
`;

export const ContainerNav = styled.div`
  width: 100%;
  height: 50px;
  background: #8ac926;
  color: white;
  box-shadow: 0 0 5px rgba(18, 23, 39, 0.4);
`;
export const Nav = styled.nav`
  height: auto;
  ${flexAlignCenter}
  & > ul {
    ${flexAlignCenter}
    max-width:500px;
    background: green;
    height: auto;
  }
  & > ul > li {
    margin-right: 20px;
    background: blue;
  }
  & > ul > li > a {
    font-size: 50px;
  }
`;
export const Content = styled.div`
  ${mxw80}
  ${flex}
`;

Exemple:

https://codesandbox.io/s/practical-murdock-1pdul

0
user12465675 19 févr. 2020 à 04:15

1 réponse

Meilleure réponse

Si j'ai bien compris votre question, vous n'avez qu'à régler le heigth de ContainerNav sur auto au lieu de la hauteur fixe de 50px.

0
Johannes 19 févr. 2020 à 01:24