[{"data":1,"prerenderedAt":357},["Reactive",2],{"content-query-jE1bcEtHxI":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":352,"_id":353,"_source":354,"_file":355,"_extension":356},"/docs/utilities/css/overflow","css",false,"","CSS Utility Classes - Overflow - Inkline","You can use the overflow utilities for deciding how content overflows an element.",{"type":11,"children":12,"toc":349},"root",[13,20,27,33,55,345],{"type":14,"tag":15,"props":16,"children":19},"element","content-heading",{"subtitle":17,"title":18},"CSS Utility Classes","Overflow",[],{"type":14,"tag":21,"props":22,"children":24},"h2",{"id":23},"you-can-use-the-overflow-utilities-for-deciding-how-content-overflows-an-element",[25],{"type":26,"value":9},"text",{"type":14,"tag":28,"props":29,"children":30},"p",{},[31],{"type":26,"value":32},"Overflow functionality is provided for two values by default, and they are not responsive.",{"type":14,"tag":34,"props":35,"children":36},"ul",{},[37,47],{"type":14,"tag":38,"props":39,"children":40},"li",{},[41],{"type":14,"tag":42,"props":43,"children":44},"code-inline",{},[45],{"type":26,"value":46},"._overflow:visible",{"type":14,"tag":38,"props":48,"children":49},{},[50],{"type":14,"tag":42,"props":51,"children":52},{},[53],{"type":26,"value":54},"._overflow:hidden",{"type":14,"tag":56,"props":57,"children":58},"content-tabs",{},[59,68],{"type":14,"tag":60,"props":61,"children":62},"template",{"v-slot:preview":7},[63],{"type":14,"tag":64,"props":65,"children":67},"content-preview",{"src":66},"/stories/utilities/overflow/basic",[],{"type":14,"tag":60,"props":69,"children":70},{"v-slot:vue":7},[71],{"type":14,"tag":72,"props":73,"children":78},"code",{"className":74,"code":76,"language":77,"meta":7},[75],"language-vue","\u003Ctemplate>\n    \u003Cdiv class=\"_overflow:auto!\" style=\"width: 250px; height: 90px\">\n        This is an example using the \u003Ccode>._overflow:auto\u003C/code> utility on an element with fixed\n        width and height dimensions. The content of this div will scroll vertically.\n    \u003C/div>\n\n    \u003Cdiv class=\"_overflow:hidden!\" style=\"width: 250px; height: 90px\">\n        This is an example using the \u003Ccode>._overflow:hidden\u003C/code> utility on an element with fixed\n        width and height dimensions. The content below the fold of this div will be hidden.\n    \u003C/div>\n\u003C/template>\n\n","vue",[79],{"type":14,"tag":80,"props":81,"children":82},"pre",{},[83],{"type":14,"tag":72,"props":84,"children":85},{"__ignoreMap":7},[86,108,166,193,202,219,228,277,302,311,327],{"type":14,"tag":87,"props":88,"children":91},"span",{"class":89,"line":90},"line",1,[92,98,103],{"type":14,"tag":87,"props":93,"children":95},{"class":94},"ct-553616",[96],{"type":26,"value":97},"\u003C",{"type":14,"tag":87,"props":99,"children":101},{"class":100},"ct-914029",[102],{"type":26,"value":60},{"type":14,"tag":87,"props":104,"children":105},{"class":94},[106],{"type":26,"value":107},">\n",{"type":14,"tag":87,"props":109,"children":111},{"class":89,"line":110},2,[112,117,122,127,133,138,144,148,153,157,162],{"type":14,"tag":87,"props":113,"children":114},{"class":94},[115],{"type":26,"value":116},"    \u003C",{"type":14,"tag":87,"props":118,"children":119},{"class":100},[120],{"type":26,"value":121},"div",{"type":14,"tag":87,"props":123,"children":124},{"class":94},[125],{"type":26,"value":126}," ",{"type":14,"tag":87,"props":128,"children":130},{"class":129},"ct-762058",[131],{"type":26,"value":132},"class",{"type":14,"tag":87,"props":134,"children":135},{"class":94},[136],{"type":26,"value":137},"=",{"type":14,"tag":87,"props":139,"children":141},{"class":140},"ct-952708",[142],{"type":26,"value":143},"\"_overflow:auto!\"",{"type":14,"tag":87,"props":145,"children":146},{"class":94},[147],{"type":26,"value":126},{"type":14,"tag":87,"props":149,"children":150},{"class":129},[151],{"type":26,"value":152},"style",{"type":14,"tag":87,"props":154,"children":155},{"class":94},[156],{"type":26,"value":137},{"type":14,"tag":87,"props":158,"children":159},{"class":140},[160],{"type":26,"value":161},"\"width: 250px; height: 90px\"",{"type":14,"tag":87,"props":163,"children":164},{"class":94},[165],{"type":26,"value":107},{"type":14,"tag":87,"props":167,"children":169},{"class":89,"line":168},3,[170,175,179,184,188],{"type":14,"tag":87,"props":171,"children":172},{"class":94},[173],{"type":26,"value":174},"        This is an example using the \u003C",{"type":14,"tag":87,"props":176,"children":177},{"class":100},[178],{"type":26,"value":72},{"type":14,"tag":87,"props":180,"children":181},{"class":94},[182],{"type":26,"value":183},">._overflow:auto\u003C/",{"type":14,"tag":87,"props":185,"children":186},{"class":100},[187],{"type":26,"value":72},{"type":14,"tag":87,"props":189,"children":190},{"class":94},[191],{"type":26,"value":192},"> utility on an element with fixed\n",{"type":14,"tag":87,"props":194,"children":196},{"class":89,"line":195},4,[197],{"type":14,"tag":87,"props":198,"children":199},{"class":94},[200],{"type":26,"value":201},"        width and height dimensions. The content of this div will scroll vertically.\n",{"type":14,"tag":87,"props":203,"children":205},{"class":89,"line":204},5,[206,211,215],{"type":14,"tag":87,"props":207,"children":208},{"class":94},[209],{"type":26,"value":210},"    \u003C/",{"type":14,"tag":87,"props":212,"children":213},{"class":100},[214],{"type":26,"value":121},{"type":14,"tag":87,"props":216,"children":217},{"class":94},[218],{"type":26,"value":107},{"type":14,"tag":87,"props":220,"children":222},{"class":89,"line":221},6,[223],{"type":14,"tag":87,"props":224,"children":225},{},[226],{"type":26,"value":227},"\n",{"type":14,"tag":87,"props":229,"children":231},{"class":89,"line":230},7,[232,236,240,244,248,252,257,261,265,269,273],{"type":14,"tag":87,"props":233,"children":234},{"class":94},[235],{"type":26,"value":116},{"type":14,"tag":87,"props":237,"children":238},{"class":100},[239],{"type":26,"value":121},{"type":14,"tag":87,"props":241,"children":242},{"class":94},[243],{"type":26,"value":126},{"type":14,"tag":87,"props":245,"children":246},{"class":129},[247],{"type":26,"value":132},{"type":14,"tag":87,"props":249,"children":250},{"class":94},[251],{"type":26,"value":137},{"type":14,"tag":87,"props":253,"children":254},{"class":140},[255],{"type":26,"value":256},"\"_overflow:hidden!\"",{"type":14,"tag":87,"props":258,"children":259},{"class":94},[260],{"type":26,"value":126},{"type":14,"tag":87,"props":262,"children":263},{"class":129},[264],{"type":26,"value":152},{"type":14,"tag":87,"props":266,"children":267},{"class":94},[268],{"type":26,"value":137},{"type":14,"tag":87,"props":270,"children":271},{"class":140},[272],{"type":26,"value":161},{"type":14,"tag":87,"props":274,"children":275},{"class":94},[276],{"type":26,"value":107},{"type":14,"tag":87,"props":278,"children":280},{"class":89,"line":279},8,[281,285,289,294,298],{"type":14,"tag":87,"props":282,"children":283},{"class":94},[284],{"type":26,"value":174},{"type":14,"tag":87,"props":286,"children":287},{"class":100},[288],{"type":26,"value":72},{"type":14,"tag":87,"props":290,"children":291},{"class":94},[292],{"type":26,"value":293},">._overflow:hidden\u003C/",{"type":14,"tag":87,"props":295,"children":296},{"class":100},[297],{"type":26,"value":72},{"type":14,"tag":87,"props":299,"children":300},{"class":94},[301],{"type":26,"value":192},{"type":14,"tag":87,"props":303,"children":305},{"class":89,"line":304},9,[306],{"type":14,"tag":87,"props":307,"children":308},{"class":94},[309],{"type":26,"value":310},"        width and height dimensions. The content below the fold of this div will be hidden.\n",{"type":14,"tag":87,"props":312,"children":314},{"class":89,"line":313},10,[315,319,323],{"type":14,"tag":87,"props":316,"children":317},{"class":94},[318],{"type":26,"value":210},{"type":14,"tag":87,"props":320,"children":321},{"class":100},[322],{"type":26,"value":121},{"type":14,"tag":87,"props":324,"children":325},{"class":94},[326],{"type":26,"value":107},{"type":14,"tag":87,"props":328,"children":330},{"class":89,"line":329},11,[331,336,340],{"type":14,"tag":87,"props":332,"children":333},{"class":94},[334],{"type":26,"value":335},"\u003C/",{"type":14,"tag":87,"props":337,"children":338},{"class":100},[339],{"type":26,"value":60},{"type":14,"tag":87,"props":341,"children":342},{"class":94},[343],{"type":26,"value":344},">",{"type":14,"tag":152,"children":346},[347],{"type":26,"value":348},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}",{"title":7,"searchDepth":110,"depth":110,"links":350},[351],{"id":23,"depth":110,"text":9},"markdown","content:docs:utilities:css:overflow.md","content","docs/utilities/css/overflow.md","md",1794582261593]