Question

我正面临一个问题，我正在尝试使用弹性盒解决这个问题，而且没有黑客攻击。

我有一个项目清单。

每个项目都是由以下内容组成的行：

具有固定宽度的图标元素
具有自适应宽度的内容元素
一个固定宽度的按钮容器元素

我的内容元素有两行不同的样式（项目的ID和描述）。当描述太长，内容元素变得太宽时，会出现问题。

HTML：

<div class="column">
  <div class="row">
    <div class="row_icon"></div>
    <div class="row_content">
      <div class="row_content_itemName">Item 1 name</div>
      <div class="row_content_itemDesc">Item 1 description</div>
    </div>
    <div class="row_buttons"></div>
  </div>
  <div class="row">
    <div class="row_icon"></div>
    <div class="row_content">
      <div class="row_content_itemName">Item 2 name</div>
      <div class="row_content_itemDesc">Item 2 verrrrrrrryyyyy looooonnnnggg description</div>
    </div>
    <div class="row_buttons"></div>
  </div>
</div>

CSS：

.column {
  width: 50%;
  height: 200px;
  border: solid 1px black;
}

.row {
  width: 100%;
  display: flex;
  border-bottom: 1px solid blue;
}

.row_icon {
  width: 60px;
  height: 60px;
  background: green;
  flex: 0 0 auto;
}

.row_buttons {
  width: 60px;
  height: 60px;
  background: orange;
  flex: 0 0 auto;
}

.row_content {
  padding: 10px;
  border: 1px solid red;
  flex: 1 1 auto;
}

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

Here is the jsfiddle

我想显示第二行没有包装和省略号。知道如何解决这个问题吗？

编辑：

感谢mlegg评论我通过添加overflow：hidden解决了这个问题;在父容器上。

Solved jsfiddle

如何约束子flex元素的大小

0 个答案: