1

All:

If I set a flexbox text-overflow: ellipsis; and specify its flex as 1 1 auto; When I shrink that flexbox, how the browser calculate the value of auto?

<style>
    .flexcontainer {
        display:flex;
        flex-flow: row nowrap;
        width:100%;
        height:auto;
    }
    .test {
        flex: 1 1 auto;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space: nowrap;
    }
</style>

<div class="flexcontainer">
    <div class="test">This is a flexbox to thrink</div>
    <div class="test">This is another flexbox to thrink</div>
</div>

Is it still the full length of text without cropped? Like the browser first get the total length of text without cropped in those two .test divs and use width of .flexcontainer minus that total to get shrink width?

Another question related to this is:

[1] How the browser decides if the flexbox is thrinking or growing?

[2] If I give a very very large number to flex-basis like flex: 1 1 10000000px, how the browser calculate the thrink?

Thanks

Kuan
  • 11,149
  • 23
  • 93
  • 201
  • What do your tests show...you have tested haven't you? – Paulie_D Aug 21 '15 at 17:44
  • @Paulie_D Thanks for reply. What I am not sure about the flex-basis is: I read from some posts which say the actually width does not matter to browser when it calculate the remaining only use flex-basis. So There are two questions I probably want to clearify: [1] How the browser decide if the flexbox is thrinking or growing? [2] If I give a very very large number to flex-basis like flex: 1 1 10000000px, how the browser calsulate the thrink? – Kuan Aug 21 '15 at 17:52

1 Answers1

1

Flex-basis Reference

A flex-basis value set to auto sizes the element according to its size property (which can itself be the keyword auto, which sizes the element based on its contents).

So by above definition, the text-overflow: ellipsis is used by the browser when the container width is lesser than the content width.

enter image description here

enter image description here

m4n0
  • 29,823
  • 27
  • 76
  • 89
  • Thanks, but I still a little confused, this is like "chicken first egg first" question: I think the text overflow is caused by the calculation of thrink while the thrink also depends on the length of text, could you give a little detail how the browser decide the order to calculate value? – Kuan Aug 21 '15 at 17:59
  • You will need to read this nice answer: http://stackoverflow.com/a/21064102/4813913 :) – m4n0 Aug 21 '15 at 18:08
  • Thanks for info, but what I am supposed to read from that link related to this question? – Kuan Aug 21 '15 at 18:12
  • In that picture, if the `scrollWidth` or `clientWidth` is lower than the `cssWidth`, then the `text-overflow` property comes into action. So when you run this code in [Jsfiddle](http://jsfiddle.net/4un8zx4j/) and resize it, notice the container width with respect to content. – m4n0 Aug 21 '15 at 18:24