When cut off the text, it stretches the parent elements

Question

I have a list with text that needs to be cutted off in each item, but when i do

  white-space: nowrap;

the item stretches and horizontal scroll bar appears. How to fit cutted text in?

.wrapper {
  display: flex;
  flex-direction: row;
}
.wrapper-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #00f;
}
.main-header {
  position: sticky;
  top: 0;
  height: 70px;
  border: 1px solid #f0f;
  background-color: #fff;
}
.main-content {
  height: 1000px;
  padding: 15px 25px;
  border: 1px solid #000;
}
.sidebar {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 100vh;
  width: 250px;
  border: 1px solid #0ff;
}
.content-section {
  border: 1px solid #b22222;
}
.content {
  padding: 5px;
}
.content-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding: 7px 20px;
  margin: 0;
  height: 40px;
  border: 1px solid #3cb371;
  list-style: none;
}
.content-list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width:0;
}

<div class="wrapper">
  <aside class="sidebar"></aside>
  <div class="wrapper-column">
    <header class="main-header"></header>
    <main class="main-content">
      <section class="content-section">
        <div class="content">
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem libero aspernatur voluptatem, voluptate voluptas enim voluptatibus tempore amet expedita excepturi facere, possimus debitis nam earum!</li>
            <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ratione tempore sint! Suscipit rerum facilis consequuntur, sequi aliquam reiciendis, in quia fugiat nostrum, numquam vel.</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit porro facilis numquam culpa illum amet minima, delectus accusantium consectetur cumque repellendus id officia laudantium odio!</li>
          </ul>
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nam praesentium a hic, molestias ipsam sed nulla, non, quaerat necessitatibus unde. Similique quod illum consequatur.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quo adipisci iusto accusantium sed laboriosam officiis placeat eaque veniam animi, facere mollitia repudiandae rerum alias.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint, architecto beatae esse culpa deleniti quaerat hic, blanditiis provident natus quam doloribus voluptatibus similique ea!</li>
          </ul>
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa tempore laudantium voluptatem dolor quod harum facilis voluptas consectetur minus, nulla, excepturi illum exercitationem eos ipsum!</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate numquam eveniet debitis, voluptatibus velit, quo aut quos magnam consequatur natus quisquam dicta quidem, illo ipsa.</li>
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolor ipsa, numquam veritatis ut mollitia distinctio. Magnam nobis expedita asperiores dolorum eaque sapiente, tenetur quisquam!</li>
          </ul>
        </div>
      </section>
    </main>
  </div>
</div>

https://jsfiddle.net/nz7ubw2p/

@ishidex2 no, i mean cut off text with " **...** " at the end — D.Stone, Feb 25 '19 at 21:14

score 0 · Accepted Answer · answered Feb 25 '19 at 21:16

Instead of using width:100% you should consider flex-grow:1 to fill the remaining space and min-width:0 to disable the auto width and allow the shrink.

.wrapper {
  display: flex;
  flex-direction: row;
}
.wrapper-column {
  display: flex;
  flex-direction: column;
  flex-grow:1;
  min-width:0;
  border: 1px solid #00f;
}
.main-header {
  position: sticky;
  top: 0;
  height: 70px;
  border: 1px solid #f0f;
  background-color: #fff;
}
.main-content {
  height: 1000px;
  padding: 15px 25px;
  border: 1px solid #000;
}
.sidebar {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 100vh;
  width: 250px;
  border: 1px solid #0ff;
}
.content-section {
  border: 1px solid #b22222;
}
.content {
  padding: 5px;
}
.content-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding: 7px 20px;
  margin: 0;
  height: 40px;
  border: 1px solid #3cb371;
  list-style: none;
}
.content-list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width:0;
}

<div class="wrapper">
  <aside class="sidebar"></aside>
  <div class="wrapper-column">
    <header class="main-header"></header>
    <main class="main-content">
      <section class="content-section">
        <div class="content">
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem libero aspernatur voluptatem, voluptate voluptas enim voluptatibus tempore amet expedita excepturi facere, possimus debitis nam earum!</li>
            <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ratione tempore sint! Suscipit rerum facilis consequuntur, sequi aliquam reiciendis, in quia fugiat nostrum, numquam vel.</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit porro facilis numquam culpa illum amet minima, delectus accusantium consectetur cumque repellendus id officia laudantium odio!</li>
          </ul>
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nam praesentium a hic, molestias ipsam sed nulla, non, quaerat necessitatibus unde. Similique quod illum consequatur.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quo adipisci iusto accusantium sed laboriosam officiis placeat eaque veniam animi, facere mollitia repudiandae rerum alias.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint, architecto beatae esse culpa deleniti quaerat hic, blanditiis provident natus quam doloribus voluptatibus similique ea!</li>
          </ul>
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa tempore laudantium voluptatem dolor quod harum facilis voluptas consectetur minus, nulla, excepturi illum exercitationem eos ipsum!</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate numquam eveniet debitis, voluptatibus velit, quo aut quos magnam consequatur natus quisquam dicta quidem, illo ipsa.</li>
            <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolor ipsa, numquam veritatis ut mollitia distinctio. Magnam nobis expedita asperiores dolorum eaque sapiente, tenetur quisquam!</li>
          </ul>
        </div>
      </section>
    </main>
  </div>
</div>

@D.Stone I have added a link to another question with the needed details so you can better understand — Temani Afif, Feb 25 '19 at 21:23

When cut off the text, it stretches the parent elements

1 Answers1