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: auto
  • min-height: auto

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

you can override these defaults setting flex items to:

  • min-width: 0
  • min-height: 0
  • overflow: hidden (or other value, except visible)

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>

jsfiddle

flexbox specification

4.5. implied minimum size of flex items

to provide more reasonable default minimum size flex items, specification introduces new auto value initial value of min-width , min-height properties defined in css 2.1.

with regard auto value...

on flex item overflow visible in main axis, when specified on flex item’s main-axis min-size property, specifies automatic minimum size. otherwise computes 0.

in other words:

  • the min-width: auto , min-height: auto defaults apply when overflow visible.
  • if overflow value not visible, value of min-size property 0.
  • hence, overflow: hidden can substitute min-width: 0 , min-height: 0.

and...

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: 0 defaults, or (2) automatically applying 0 defaults 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, auto value min-width , min-height properties "new". means browsers may still render 0 value default, because implemented flex layout before value updated , because 0 initial value min-width , min-height in css 2.1. one such browser ie11. other browsers have updated newer auto value defined in flexbox spec.


Comments

Post a Comment

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

this question exact duplicate of: puphpet/vagrant: unable access lamp vm ip address 1 answer i following basic vagrant tutorial , vagrant provisions box on ubuntu without complaining. moreover, can vagrant ssh vm. however, vm not reachable host: it's not possible ping it's ip address. what have achieved: installed virtualbox (5.1.24 r117012 (qt5.5.1)) , vagrant (1.9.7) onto ubuntu (16.04.2 lts) machine. provisioned vm vagrant up , vagrant finishes job , not complain. vagrant ssh works. i have manually installed lighttpd on guest vm , can ping/curl address: localhost within guest vm. this when trying reach guest vm host: ~/tmp/myfirstvagrantproject$ ping 172.22.22.22 ping 172.22.22.22 (172.22.22.22) 56(84) bytes of data. ... icmp_seq=4 destination net unreachable ... 171 packets transmitted, 0 received, +21 errors, 100% packet loss, time 173
Read more

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

i'm receiving error applicationdbcontext database when trying update entity framework. i've googled, tried fixes here on so, no avail. i'm deleting database each time make change, once deploy, not option. here's error: pm> update-database -context applicationdbcontext system.data.sqlclient.sqlexception: there object named 'aspnetroles' in database. @ system.data.sqlclient.sqlconnection.onerror(sqlexception exception, boolean breakconnection, action 1 wrapcloseinaction) @ system.data.sqlclient.tdsparser.throwexceptionandwarning(tdsparserstateobject stateobj, boolean callerhasconnectionlock, boolean asyncclose) @ system.data.sqlclient.tdsparser.tryrun(runbehavior runbehavior, sqlcommand cmdhandler, sqldatareader datastream, bulkcopysimpleresultset bulkcopyhandler, tdsparserstateobject stateobj, boolean& dataready) @ system.data.sqlclient.sqlcommand.runexecutenonquerytds(string methodname, boolean async, int32 timeout, boolean
Read more

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -

i have built module in solidus , ruby on rails , try create tests. i trying create integration tests , have error: e error: prescriptionphotostest#test_/prescription_photos_post_endpoint_throws_an_error_when_wrong_params: argumenterror: missing host link to! please provide :host parameter, set default_url_options[:host], or set :only_path true test/integration/prescription_photos_test.rb:6:in `block in ' i read this , this , doesn't make difference. my code returning error on line: @user = factorygirl.create(:user) here code files. prescription_photos_rest.rb require 'test_helper' class prescriptionphotostest < actiondispatch::integrationtest setup spree::auth::config[:confirmable] = false @user = factorygirl.create(:user) end def authenticated_header token = knock::authtoken.new(payload: { sub: @user.id }).token { 'authorization': "bearer #{token}" } end test '/prescription_p
Read more