我试图将侧边栏缩小到仅显示其宽度的50px。
在悬停时，我希望此特定链接展开以显示其内容。
您可以在下面的代码段中看到它正常工作。
问题是我需要启用overflow-y:auto;所以如果侧边栏太长，用户可以滚动它。
但是overflow-y:auto添加到overflow-x:visible后，overflow-x就不再有效了！
通过取消注释overflow-y来尝试，然后尝试将鼠标悬停在任何元素上。
我错过了什么？
#parent{
background:#ddd;
display:flex;
flex-direction:row;
height:100vh;
max-height:100vh;
overflow:hidden;
}
#content{
z-index:1;/*to makesure sidebar is above content*/
background:yellow;
flex:1 1 0%;
}
#sidebar{
z-index:2;/*to makesure sidebar is above it*/
width:50px;
/*If i uncomment this, the hover effect will no longer works */
/*overflow-y:auto;*/
overflow-x:visible;
}
a{
height:50px;
background:#ccc;
width:50px;
display:flex;
flex-direction:col;
}
a > *{
flex:1 1 0%;
}
a:hover{
min-width:100px!important;
width:100x;
flex-direction:row;
}<div id="parent">
<div id="sidebar">
<a> <i>1</i> <span class="title">Title</span> </a>
<a> <i>2</i> <span class="title">Title</span> </a>
<a> <i>3</i> <span class="title">Title</span> </a>
<a> <i>4</i> <span class="title">Title</span> </a>
<a> <i>5</i> <span class="title">Title</span> </a>
<a> <i>6</i> <span class="title">Title</span> </a>
<a> <i>7</i> <span class="title">Title</span> </a>
<a> <i>8</i> <span class="title">Title</span> </a>
<a> <i>9</i> <span class="title">Title</span> </a>
<a> <i>10</i> <span class="title">Title</span> </a>
<a> <i>11</i> <span class="title">Title</span> </a>
<a> <i>12</i> <span class="title">Title</span> </a>
<a> <i>13</i> <span class="title">Title</span> </a>
<a> <i>14</i> <span class="title">Title</span> </a>
<a> <i>15</i> <span class="title">Title</span> </a>
</div>
<div id="content">
given lower z-index to makesure sibar is above content
</div>
</div>
答案 0 :(得分：1)
你问的是不可能的，溢出是一种接受它或保留它属性和滚动条是操作系统/浏览器chrome的一部分 - 你看到的任何花哨的东西你用滚动条除了这通常是通过javascript实现的。
除此之外，这是一个可行的替代方案，不使用javascript：
我所做的就是让整个页面可滚动，给内容一个div子（#subcontent）并给它一个属性position: fixed;保持它顶部。
我还将overflow:auto;和height:100%;添加到#subcontent，以便在内容溢出时保持可滚动状态（我添加了一些填充文本来测试）。现在，当您将鼠标悬停在侧边栏上时，它会滚动，当您将鼠标悬停在内容上时，会滚动显示。
唯一的问题是你可以看到2个滚动条，这看起来有点奇怪 - 当你到达内容的底部并继续滚动时，它会滚动侧边栏。但这是你必须在这里做出的牺牲，可能是你问题的唯一纯css / html解决方案。
请注意，已经存在的其他一些css属性现在可能是多余的，可以删除，但我不确定。
希望这有帮助！
#parent {
background:yellow;
display:flex;
flex-direction:row;
}
#content {
z-index:1; /*to make sure sidebar is above content*/
flex:1 1 0%;
}
#subcontent {
position:fixed;
overflow:auto;
height:100%;
}
#sidebar {
background:#ddd;
z-index:2; /*to make sure sidebar is above it*/
width:50px;
overflow:visible;
}
a {
height:50px;
background:#ccc;
width:50px;
display:flex;
flex-direction:col;
}
a > * {
flex:1 1 0%;
}
a:hover {
min-width:100px!important;
width:100x;
flex-direction:row;
}<div id="parent">
<div id="sidebar">
<a> <i>1</i> <span class="title">Title</span> </a>
<a> <i>2</i> <span class="title">Title</span> </a>
<a> <i>3</i> <span class="title">Title</span> </a>
<a> <i>4</i> <span class="title">Title</span> </a>
<a> <i>5</i> <span class="title">Title</span> </a>
<a> <i>6</i> <span class="title">Title</span> </a>
<a> <i>7</i> <span class="title">Title</span> </a>
<a> <i>8</i> <span class="title">Title</span> </a>
<a> <i>9</i> <span class="title">Title</span> </a>
<a> <i>10</i> <span class="title">Title</span> </a>
<a> <i>11</i> <span class="title">Title</span> </a>
<a> <i>12</i> <span class="title">Title</span> </a>
<a> <i>13</i> <span class="title">Title</span> </a>
<a> <i>14</i> <span class="title">Title</span> </a>
<a> <i>15</i> <span class="title">Title</span> </a>
</div>
<div id="content">
<div id="subcontent">given lower z-index to make sure sidebar is above content
<p>Lorem ipsum dolor sit amet, accusamus rationibus adversarium vix te, porro vocent in duo. Pro expetenda ullamcorper philosophia et, quodsi fuisset appellantur eu vix. Quo at assum mollis erroribus, sed id veri dicit. Eam prima blandit iudicabit at.
</p>
<p>
Ea vis meis impetus, moderatius dissentiunt cum at, eam ullum liber eruditi ne. Qui temporibus adversarium ex, te appetere constituam vix, te possim everti erroribus est. Mei tantas tibique ei, labore dolorum adversarium pro ex. Eius neglegentur et eam. Possit meliore mei an, has tale dico mediocritatem no. Purto singulis postulant vix cu.
</p>
<p>
Ei qui tibique repudiare mediocritatem, in vix diam velit delenit. Et recusabo suavitate dissentias duo, nam id noluisse repudiandae. At meis iisque eam, eos ex atomorum recteque consetetur. Esse nostro noluisse has ei, pro illum expetenda eu.
</p>
<p>
Vix ut disputando deterruisset, sea veritus hendrerit an. Ad has eius blandit adipisci, iuvaret eligendi omittantur ad quo. Eius dicta cu sea, et inciderint referrentur his. Modus equidem eum id, eum et dolorem incorrupte. Pri quas definitiones no, mei causae dignissim ex, pri epicurei inciderint an.
</p>
<p>
Te eos sale quas semper. Alia omittantur sed in, ea fuisset mnesarchum mei, omittam qualisque te quo. Pri ad tollit dissentiunt, malis theophrastus in pro. Natum bonorum in sed. Mei ad equidem admodum scripserit, in ius falli maiorum blandit.
</p>
<p>
Luptatum incorrupte te vel. Per tempor volumus comprehensam eu, pri iudico splendide in. Tation ornatus mea ea, quo ex inani repudiare. Qui ad malis sensibus, mel quot facer cu. Quidam vituperata duo no, cu vix reque maiestatis, libris principes sit ea. Duo no habemus explicari, ne quo tota conclusionemque, eu vel percipit reprehendunt.
</p>
<p>
Option pericula referrentur at vix, mea elitr mediocrem ei. At facete audiam habemus usu, detracto repudiare vix ne, ea commodo expetenda eos. Equidem referrentur ei eos, no sed audire appellantur. Nec ei dicam sapientem complectitur, est ex justo habemus inimicus. His ceteros delicata scriptorem id. Et saepe discere per, dolores laboramus prodesset sit an. Prima repudiare an his, vim tritani maluisset gloriatur te, cu eam suavitate constituam.
</p>
<p>
Usu id hinc nemore, ex ius invidunt perfecto, per eu animal admodum efficiantur. Ad tempor fuisset accommodare cum, cu pri oblique gubergren. Duo et omnium nusquam democritum. Et tritani mandamus sit. Iisque docendi corrumpit vel at, pri ei elit errem.
</p>
<p>
Ei qui quodsi iriure, sententiae reprimique his ei. Decore nullam et duo. Mutat scriptorem in vix, ei saperet platonem deseruisse nec. An hinc aperiam fuisset sed, vocibus vivendum ad usu. No eros feugait partiendo has. Ne modo mutat vis, id eam esse tractatos, quem pertinax consequuntur sit ut.
</p>
<p>
Ad facer elitr munere pri. Quo id aperiam vocibus, sint offendit ius id. Eu impetus convenire vim, nibh melius qui ad, omittam abhorreant id quo. In vix aliquip indoctum, eu facilisi postulant ius. Ea epicuri aliquando necessitatibus sed.
</p></div>
</div>
</div>