当文本内容太长时，停止flex子级增长[重复]

Question

我有一个灵活的布局，看起来像这样：

这很好，但是当产品描述很长时，我想隐藏溢出并显示省略号。

有一个类为info container的flex容器，它有两个flex子容器-左（30%）和右（70%）。右侧的div本身就是一个flex容器。问题是当文本太长时，div会扩展：

HTML是：

<div class="info-container top">
  <div class="left">
    <div class="item-image-container">
      <div class="item-image" > 
        <img height="75" width="75" src="https://static.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg" /> 
      </div>
    </div>
  </div>
  <div class="right">
    <h2>
     header
    </h2>

    <div class="product-description">
      product desc stuff product desc stuff stuff product desc stuff stuff 
    </div>
  </div>
</div>

CSS是：

.info-container {
      margin-left: 300px;
      display: flex;
      flex: 0 0 100%;
      flex-direction: row;
      justify-content: center;
      padding-bottom: 20px;
      width: 400px;
      border: 1px red solid;
      padding: 3px;
}

.left {
  font-size: 2.5rem;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 30%;
}


.right {
  flex: 70%;
}

h2 {
  font-weight: bold;
  min-width:0;
}

.product-description {
  min-width:0;
  font-sixe: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h2 {
  margin: 0;
}

JSFIDLE在这里。

如果文本太长，我如何确保右div不会展开，而是显示省略号？




Answer 1

虽然我是flex box的大力支持者，但您在这里使用它似乎并不合适。

• 你有很多固定宽度的元素（img： 75px，. info容器： 400px）
• 您已经将flex父属性分配给子属性（arive-Content，ame-Item）

如果使用如此多的固定宽度是这种情况的一个标准，那么您可以通过为您的图像使用一个浮动容器来简化这一点。

简单浮点数示例：

.info-container {
  max-width: 400px;
  border: 1px red solid;
  padding: 3px;
  background: #ddd;
  min-height: 75px;
}

.left {
  float: left;
}

h2 {
  font-weight: bold;
  min-width:0;
  margin: 0;
}

.product-description {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="info-container top">
  <div class="left">
  <img height="75" width="75" src="https://static.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg" /> 
  </div>
  <div class="right">
    <h2>header</h2>
    <div class="product-description">
      Product desc stuff product desc stuff stuff product desc stuff stuff product desc stuff stuff
    </div>
</div>