html - No horizontal scrollbar in flex layout when scroll amount is less than vertical scrollbar -


i'm attempting place scrollable area inside of flex layout, when need both horizontal , vertical scrollbars on nested box, vertical scrollbar isn't being taken account when determining need horizontal scrollbar (and vice-versa).

see example: https://jsfiddle.net/mjkwbud4/

the setup

the .fixed div given:

  • a fixed width of 200px
  • overflow: auto
  • inner block content 200px wide, height greater outer container.

expected outcome:

  • a vertical scrollbar appear, since content's height larger fit
  • a horizontal scrollbar appear, since vertical scrollbar takes space, meaning inner content wouldn't fit either.

actual outcome:

  • a vertical scrollbar appears, , takes horizontal space
  • a horizontal scrollbar not appear, despite there not being enough.
  • using mousewheel shows can indeed scroll side-to-side, though overflow: auto considers there no need scrolling.
  • changing overflow: auto overflow: scroll shows both scrollbars being active.
  • $0.scrollwidth > $0.clientwidth true - origin of problem, need detect scrollbars js in layout

the jsfiddle includes flexible container well. dragging window shows horizontal scrollbar doesn't appear there's overflow.

i'm seeing varying degrees in browsers, maybe i'm not understanding deliberate spec? how should put overflowing, both x , y, content inside flex layout?

when doing normal block elements don't problem, , vertical scrollbar subtracted when showing/hiding horizontal one. want able in flex can fill height.

when use display: flex weird layout break happens, not sure if there real fix have found adding border fixes problem. can add tiny transaprent border flex child class (.big), won't affect layout , fix issue:

border: 1px solid transparent;

you can see working here:

.fixed, .flex {     overflow: auto;  }    .outer {    flex: 1;    height: 100px;    display: flex;    overflow: hidden;    }    .fixed {    color: #fff;    background: repeating-linear-gradient(      45deg,      #606dbc,      #606dbc 10px,      #465298 10px,      #465298 20px    );    flex: 0 0 200px;  }    .flex {    flex: 1 1 auto;    background: #eee;    display: flex;  }    .flex .big {    flex: 1 0 500px;  }    .big {    width: 199px;    height: 200px;        /* need add tiny transparent border here */    border: 1px solid transparent;  }
<div class="outer">    <div class="fixed">      <div class="big">this fixed width.</div>    </div>    <div class="flex">      <div class="big">this flexible area.</div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more