html - Why doesn't flex item shrink past content size? -
i have 4 flexbox columns , works fine, when add text column , set big font size, making column wider should due flexbox setting.
i tried use word-break: break-word , helped, still, when resize column small width, letters in text broken multiple lines (one letter per line) column not smaller width 1 letter size.
try watch video: http://screencast-o-matic.com/watch/cdetln1tyt (at start, first column smallest, when resized window, widest column.i want respect flex settings always.. flex sizes 1 : 3 : 4 : 4)
i know, setting font size , column padding smaller help... there other solution?
i can not use overflow-x: hidden.
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>
the implied minimum size of flex items
you're bumping against minimum sizing algorithm of flex items.
this default setting prevents flex item shrinking past size of content (regardless of other flex factors, such flex-shrink or flex-basis).
the defaults are...
min-width: automin-height: auto
...for flex items in row-direction , column-direction, respectively.
you can override these defaults setting flex items to:
min-width: 0min-height: 0overflow: hidden(or other value, exceptvisible)
revised demo
.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>flexbox specification
4.5. implied minimum size of flex items
to provide more reasonable default minimum size flex items, specification introduces new
autovalue initial value ofmin-width,min-heightproperties defined in css 2.1.
with regard auto value...
on flex item
overflowvisiblein main axis, when specified on flex item’s main-axis min-size property, specifies automatic minimum size. otherwise computes0.
in other words:
- the
min-width: auto,min-height: autodefaults apply whenoverflowvisible. - if
overflowvalue notvisible, value of min-size property0. - hence,
overflow: hiddencan substitutemin-width: 0,min-height: 0.
and...
- the minimum sizing algorithm applies on main axis.
- for example, flex item in row-direction container not
min-height: autodefault. - for more detailed explanation see post:
multiple levels of flex items
when dealing nested flex containers, may necessary identify flex items on different levels , override min-width: auto / min-height: auto each one. here's example:
browser rendering notes
since @ least 2017, appears chrome either (1) reverting
min-width: 0/min-height: 0defaults, or (2) automatically applying0defaults in situations based on mystery algorithm. (this call intervention.) result, many people seeing layout (especially desired scrollbars) work expected in chrome, not in firefox / edge.as noted in spec,
autovaluemin-width,min-heightproperties "new". means browsers may still render0value default, because implemented flex layout before value updated , because0initial valuemin-width,min-heightin css 2.1. one such browser ie11. other browsers have updated newerautovalue defined in flexbox spec.
Comments
Post a Comment