working nowrap in flex

working nowrap in flex

by Max Mumford

HTML

<div class="header">
  <div class="buttons">buttons</div>
  <div class="content">
    This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex
  </div>
  <div class="buttons">buttons</div>
</div>

CSS

.header {
  background: red;
  color: white;
  display: flex;
  flex-direction: row;
}

.header .content{
    white-space: nowrap;
    flex: 0 1 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}

.header .buttons {
    background: green;
    flex: 1 0 auto;
}