Css Увеличьте высоту div в соответствии с размером шрифта.

Question

Я в основном собираюсь сделать доступность для увеличения размера шрифта, но я не уверен, как этого добиться: в основном мне нужно, чтобы мой div увеличивался по высоте, когда размер моего текста превышает максимальную ширину, что-то вроде это:

на данный момент, если я попробую это, у меня есть это:

---

пропускает мою максимальную ширину и не увеличивается по высоте как «разрыв строки», как в предыдущем коде gif:

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

пример:

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

Answer 1

Если я правильно понял ваш вопрос, вам нужно только установить heigth из ContainerNav в auto вместо фиксированной высоты 50px.