flex 容器中的项目溢出 x 轴中的父元素答案

【问题标题】：Items in flex container overflows parrent element in x-axesflex 容器中的项目溢出 x 轴中的父元素
【发布时间】：2021-12-08 22:22:19
【问题描述】：

当芯片内容太长时，我想在芯片内应用省略号。但目前芯片溢出容器。

示例代码在这里：https://codepen.io/SebastianBusek/pen/OJjbQRP

<div class="container">
  <div class="chip">
    <span class="chip__label">This is a chip, chip, chip, chip, chip, chip, chip, chip, chip, chip, chip!</span>
  </div>
  <div class="chip">
    <span class="chip__label">Chip & Dale </span>
  </div>
</div>

.container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 300px;
}

.chip {
  box-sizing: border-box;
  display: inline-flex;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  border: 1px solid black;
  margin-right: auto;
  /* margin-right: 0; */
  margin-bottom: 8px;
}

.chip__label {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 16px;
  padding-right: 16px;
  color: blue;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

在父级上使用“flex-wrap”，这会将项目包装到下一行

【讨论】：

【解决方案2】：

删除以下 CSS 属性：

height: 32px 来自.chip
white-space: nowrap 来自.chip__label

【讨论】：