Fixed, match content and fill in same flex container

Question

I would like to make the following layout:

<div class="main">
  <div class="container">
    <div class="first">
      fixed size
    </div>
    <div class="second">
      <span>very very very very very very very long text</span>
      <span>other text</span>
    </div>
    <div class="third">
      1000000000000000
    </div>
  </div>
</div>

to look like this:

Container should have three divs inside:

first div with fixed size
third div with width matching content
second div filling the remaining container witdh. Inside that div there are two spans. The first span should be the same with as it's parent and contain very long line of text that should be dotted if it cannot fit.

I tried the following css code:

* {
  box-sizing: border-box;
}

.main {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  padding: 10px;
}

.container {
  display: flex;
  width: 100%;
}

.container div {
  display: flex;
  border: 1px solid black;
}

.first {
  flex: 0 0 100px;
}

.second {
  flex-direction: column;
  flex: 1;
}

span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}


.third {
  flex: 0 1 auto;
}

but the result is not as I would like because the elements are overflowing outside of container and long text is not dotted.

What should I changed in my css to make this work?

Demo: https://stackblitz.com/edit/js-vnr21c

score 1 · Accepted Answer · answered Jul 17 '18 at 15:47

You need to set min-width:0 on the span's parent

* {
  box-sizing: border-box;
}

.main {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  padding: 10px;
}

.container {
  display: flex;
}

.container div {
  border: 1px solid black;
}

.first {
  flex: 0 0 100px;
}

.second {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}

.third {
  flex: 0 1 auto;
}

<div class="main">
  <div class="container">
    <div class="first">
      fixed size
    </div>
    <div class="second">
      <span>very very very very very very very very long text</span>
      <span>other text</span>
    </div>
    <div class="third">
      1000000000000000
    </div>
  </div>
</div>

Fixed, match content and fill in same flex container

1 Answers1