Stop flex child from growing when text contents are too long

Question

I have a flex layout which looks like this:

That's fine but when the product description is very long, I want to hide the overflow and show an ellipsis.

There is a flex container with the class info-container which has 2 flex children - left (30%) and right (70%). The right div is itself a flex container. The problem is this div expands when the text is too long:

The HTML is:

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

And the CSS is:

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

The jsfiddle is here.

How can I ensure the right div does not expand if the text is too long, and instead an ellipsis is shown?

Add `min-width: 0` to `.right`. By default, it's `auto`, so `flex-shrink` can't make the flex item narrower than its content. Also, change `flex` values from percentages to just numbers. — Ilya Streltsyn, Dec 05 '17 at 13:53
instead flex:30%;/flex:70%; use width : 30%/width:70% (or max-width) — G-Cyrillus, Dec 05 '17 at 13:53
Can you explain why you need a flexbox if you don't want it to be flexible? — Mr Lister, Dec 05 '17 at 13:55
`.right` div is a flex item, not flex container; there is a typo `font-sixe`; The soln should be restricting `.right` div `overflow:hidden`... (not tested) — user943702, Dec 05 '17 at 14:35

Robert Wade · Accepted Answer · 2017-12-05T14:31:34.940

While I'm a big proponent of flex box, your usage of it here doesn't seem appropriate.

You have a lot of fixed width elements (img: 75px, .info-container: 400px)
You have flex parent properties assigned to children (justify-content, align-items)

You can simplify this a lot with just a floated container for your image if using so many fixed widths is a criteria of this situation.

Simple float example:

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

Flex box is meant to be fluid. A more appropriate use of it might look like the following, where we allow the containers and the content to flex and fill their space appropriately.

Flex Box example:

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

.left {
  flex: 30%;
}

.right {
  flex-basis: 70%;
  min-width: 0;
}

.left img {
  max-width: 100%;
} 

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

Notice the min-width: 0 on the .right flex child. This is used to ensure the overflow works correctly (see reference here), and that any fixed widths both in the CSS and the markup are removed.

Stop flex child from growing when text contents are too long

1 Answers1