tomas657 tomas657 - 6 months ago 18
CSS Question

Why doesn't flex item shrink past content size?

I have 4 flexbox columns and everything works fine but when I add some text to column and set it to big font size, it is making column wider than it should be due to flex box setting.

I tried to use

word-break: break-word
and it helped, but still, when I resized column to very very small width, letters in text are broken to multiple lines (one letter per line) but column does not get smaller width than one letter size.

Try to watch this video: http://screencast-o-matic.com/watch/cDetln1tyT
(at start, first column is the smallest, but when I resized window, it is the widest column... I just want to respect flex settings always.. flex sizes 1 : 3 : 4 : 4)

JSFiddle: https://jsfiddle.net/78h8wv4o/3/



.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}

<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>





I know, setting font size and column paddings to smaller will help... but is there any other solution?

I can not use
overflow-x: hidden
.

Thank you

Answer

You're bumping up against the minimum sizing algorithm of flex items:

By default, the minimum size of a flex item is the size of its content.

These are the initial settings...

  • min-width: auto
  • min-height: auto

...for flex items in row-direction and column-direction, respectively.

You can override these settings with:

  • min-width: 0
  • min-height: 0

From the specification:

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1... read more


.container {
    display: flex;
}

.col {
    min-height: 200px;
    padding: 30px;
    word-break: break-word
}

.col1 {
    flex: 1;
    background: orange;
    font-size: 80px;
    min-width: 0;       /* NEW */
}

.col2 {
    flex: 3;
    background: yellow
}

.col3 {
    flex: 4;
    background: skyblue
}

.col4 {
    flex: 4;
    background: red
}
<div class="container">
    <div class="col col1">Lorem ipsum dolor</div>
    <div class="col col2">Lorem ipsum dolor</div>
    <div class="col col3">Lorem ipsum dolor</div>
    <div class="col col4">Lorem ipsum dolor</div>
</div>

Revised Demo