切断文本时，它会拉伸父元素

Question

我有一个列表，其中包含需要在每个项目中删除的文本，但是当我这样做时

  white-space: nowrap;

项目拉伸并出现水平滚动条。如何将剪切的文本放入？

.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/

Answer 1

您应该考虑使用flex-grow:1 来填充剩余空间，而不是使用width:100%，而使用min-width:0 to disable the auto width 并允许缩小。

.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>