CSS: prevent child element with text content to grow window size

user_3695718 0
Viewed 677

I have an element with long text content that I want to truncate/shrink when it is bigger than the parent's width. However instead of truncating/shrinking with "text..." style the whole window width grows and a horizontal schrollbar appears. How can I fix this and generally how do I prevent a child element to increase the parent element's width? Note that the content element is within a flex item.

Example code https://codepen.io/anon/pen/BqMNXe:

HTML

<body>
  <nav>
  </nav>

  <main>
    <article>
        lorem ipsum dolores lorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum doloreslorem ipsum dolores
    </article>
  </main>
</body>

CSS

    body{
        display: flex;
        height: 100%;
    }

    html {
      height: 100%;
    }

    nav {
        background-color: aquamarine;
        width: 20em;

        flex-shrink: 0;
        overflow-y: scroll;
        border-right: 0.2em solid black;
    }

    main {
        background-color: bisque;
        flex-shrink: 1;
        flex-grow: 1;
    }

    article {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

Thanks, Z

flexbox css html
2 Answers

Remove:

 white-space: nowrap;

from you article css class.

Or if you mean that you want to truncate your text. You will need a fixed width or if you want to do it with flexbox: see this

user_104944310

Try giving width for nav and main percentage wise.

For example :

   nav {
    background-color: aquamarine;
    width: 30%;

    flex-shrink: 0;
    overflow-y: scroll;
    border-right: 0.2em solid black;
}

main {
    background-color: bisque;
    width: 70%;

}
user_50110510
Related