我的问题似乎与链接的副本有关，但该帖子的答案并没有解决我的问题！
我的问题
我正在尝试为表格实现页面系统，CSS让我发疯。
运行下面的代码示例，您将看到搜索栏，结果编号标签和一些页面控制按钮。随着越来越多的页面按钮被添加，空间被填满，整个表格控件div开始增长。 但是，我试图得到它，以便table-controls-pages div溢出＆＃34;隐藏＆＃34;而不是增长父div。
出于某种原因，我所拥有的这段代码会导致页面按钮启动溢出但是它只会到目前为止并再次开始增长父div。我不知道为什么会这样做，它似乎是随机的。我的猜测是它与搜索和结果元素的大小有关...
* {
box-sizing: border-box;
}
.no-select {
user-select: none;
}
.horizontal-fill {
width: 100%;
min-width: 100%;
}
.table-controls {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
margin-bottom: 5px;
}
.table-controls-search {
min-width: 150px;
width: 25%;
margin-right: 5px;
}
.table-controls-results {
white-space: nowrap;
text-shadow: 0px 0px 3px white;
font-weight: bolder;
font-size: smaller;
margin-right: 5px;
}
.table-controls-navigation {
margin-left: auto;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-end;
}
.table-controls-navigation button {
border-radius: 0px;
}
.table-controls-first {
flex: 0 0 auto;
}
.table-controls-previous {
flex: 0 0 auto;
}
.table-controls-pages {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
flex: 1 1 0;
overflow-x: hidden;
}
.table-controls-page {
flex: 0 0 auto;
}
.table-controls-next {
flex: 0 0 auto;
}
.table-controls-last {
flex: 0 0 auto;
}<div class="table-controls">
<div class="table-controls-search"> <input class="horizontal-fill" type="text" size="1" placeholder="Search/Filter"> </div>
<div class="table-controls-results"> <span>Results: </span> <span class="table-controls-result">00</span> </div>
<div class="table-controls-navigation">
<div class="table-controls-first"> <button class="no-select" disabled="">First</button> </div>
<div class="table-controls-previous"> <button class="no-select" disabled="">Previous</button> </div>
<div class="table-controls-pages">
<div class="table-controls-page"> <button class="no-select" disabled="">1</button> </div>
<div class="table-controls-page"> <button class="no-select">2</button> </div>
<div class="table-controls-page"> <button class="no-select">3</button> </div>
<!-- Comment out these pages and they should justify to the right -->
<div class="table-controls-page"> <button class="no-select">4</button> </div>
<div class="table-controls-page"> <button class="no-select">5</button> </div>
<div class="table-controls-page"> <button class="no-select">6</button> </div>
<div class="table-controls-page"> <button class="no-select">7</button> </div>
<div class="table-controls-page"> <button class="no-select">8</button> </div>
<div class="table-controls-page"> <button class="no-select">9</button> </div>
<div class="table-controls-page"> <button class="no-select">10</button> </div>
<div class="table-controls-page"> <button class="no-select">11</button> </div>
<div class="table-controls-page"> <button class="no-select">12</button> </div>
<div class="table-controls-page"> <button class="no-select">13</button> </div>
<div class="table-controls-page"> <button class="no-select">14</button> </div>
<div class="table-controls-page"> <button class="no-select">15</button> </div>
<div class="table-controls-page"> <button class="no-select">16</button> </div>
<div class="table-controls-page"> <button class="no-select">17</button> </div>
<div class="table-controls-page"> <button class="no-select">18</button> </div>
<div class="table-controls-page"> <button class="no-select">19</button> </div>
<div class="table-controls-page"> <button class="no-select">20</button> </div>
<div class="table-controls-page"> <button class="no-select">21</button> </div>
<div class="table-controls-page"> <button class="no-select">22</button> </div>
<div class="table-controls-page"> <button class="no-select">23</button> </div>
<div class="table-controls-page"> <button class="no-select">24</button> </div>
<div class="table-controls-page"> <button class="no-select">25</button> </div>
<div class="table-controls-page"> <button class="no-select">26</button> </div>
<!-- -->
</div>
<div class="table-controls-next"> <button class="no-select">Next</button> </div>
<div class="table-controls-last"> <button class="no-select">Last</button> </div>
</div>
</div>
修改
将overflow: hidden或min-width: 0添加到.table-controls-navigation的解决方案并不适用于我的实际代码，因此这里的其他代码更类似于我的网站布局。
我正在使用的CSS表布局似乎导致了Flexbox的一些严重问题。
* {
box-sizing: border-box;
}
div.body-fill {
width: 100%;
height: 100%;
}
div.columns {
width: 100%;
height: 100%;
display: table;
overflow: hidden;
}
div.column-side {
max-width: 20%;
width: 20%;
height: 100%;
display: table-cell;
overflow: hidden;
}
div.column-content {
height: 100%;
box-shadow: 0px 0px 25px 5px black;
display: table-cell;
vertical-align: top;
overflow: hidden;
}
div.container {
display: block;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
background-color: white;
width: 100%;
height: 100%;
}
.no-select {
user-select: none;
}
.horizontal-fill {
width: 100%;
min-width: 100%;
}
.table-controls {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
margin-bottom: 5px;
}
.table-controls-search {
min-width: 150px;
width: 25%;
margin-right: 5px;
}
.table-controls-results {
white-space: nowrap;
text-shadow: 0px 0px 3px white;
font-weight: bolder;
font-size: smaller;
margin-right: 5px;
}
.table-controls-navigation {
margin-left: auto;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-end;
min-width: 0;
}
.table-controls-navigation button {
border-radius: 0px;
}
.table-controls-first {
flex: 0 0 auto;
}
.table-controls-previous {
flex: 0 0 auto;
}
.table-controls-pages {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
flex: 1 1 0;
overflow-x: hidden;
}
.table-controls-page {
flex: 0 0 auto;
}
.table-controls-next {
flex: 0 0 auto;
}
.table-controls-last {
flex: 0 0 auto;
}<div class="body-fill">
<div class="columns">
<div class="column-side"></div>
<div class="column-content">
<div class="container">
<div class="table-controls">
<div class="table-controls-search"> <input class="horizontal-fill" type="text" size="1" placeholder="Search/Filter"> </div>
<div class="table-controls-results"> <span>Results: </span> <span class="table-controls-result">00</span> </div>
<div class="table-controls-navigation">
<div class="table-controls-first"> <button class="no-select" disabled="">First</button> </div>
<div class="table-controls-previous"> <button class="no-select" disabled="">Previous</button> </div>
<div class="table-controls-pages">
<div class="table-controls-page"> <button class="no-select" disabled="">1</button> </div>
<div class="table-controls-page"> <button class="no-select">2</button> </div>
<div class="table-controls-page"> <button class="no-select">3</button> </div>
<!-- Comment out these pages and they should justify to the right -->
<div class="table-controls-page"> <button class="no-select">4</button> </div>
<div class="table-controls-page"> <button class="no-select">5</button> </div>
<div class="table-controls-page"> <button class="no-select">6</button> </div>
<div class="table-controls-page"> <button class="no-select">7</button> </div>
<div class="table-controls-page"> <button class="no-select">8</button> </div>
<div class="table-controls-page"> <button class="no-select">9</button> </div>
<div class="table-controls-page"> <button class="no-select">10</button> </div>
<div class="table-controls-page"> <button class="no-select">11</button> </div>
<div class="table-controls-page"> <button class="no-select">12</button> </div>
<div class="table-controls-page"> <button class="no-select">13</button> </div>
<div class="table-controls-page"> <button class="no-select">14</button> </div>
<div class="table-controls-page"> <button class="no-select">15</button> </div>
<div class="table-controls-page"> <button class="no-select">16</button> </div>
<div class="table-controls-page"> <button class="no-select">17</button> </div>
<div class="table-controls-page"> <button class="no-select">18</button> </div>
<div class="table-controls-page"> <button class="no-select">19</button> </div>
<div class="table-controls-page"> <button class="no-select">20</button> </div>
<div class="table-controls-page"> <button class="no-select">21</button> </div>
<div class="table-controls-page"> <button class="no-select">22</button> </div>
<div class="table-controls-page"> <button class="no-select">23</button> </div>
<div class="table-controls-page"> <button class="no-select">24</button> </div>
<div class="table-controls-page"> <button class="no-select">25</button> </div>
<div class="table-controls-page"> <button class="no-select">26</button> </div>
<!-- -->
</div>
<div class="table-controls-next"> <button class="no-select">Next</button> </div>
<div class="table-controls-last"> <button class="no-select">Last</button> </div>
</div>
</div>
</div>
</div>
<div class="column-side"></div>
</div>
</div>
编辑2：
我将我的列布局切换为仅使用Flexbox，但它似乎并没有帮助......
* {
box-sizing: border-box;
}
div.body-fill {
width: 100%;
height: 100%;
}
div.columns {
display: flex;
flex: 1 0 auto;
min-height: 100%;
overflow: auto;
}
div.column-side {
flex: 0 1 20%;
}
div.column-content {
box-shadow: 0px 0px 25px 5px black;
flex: 1 0 60%;
vertical-align: top;
}
div.container {
width: 100%;
min-height: 100%;
text-align: center;
margin-top: 0;
margin-bottom: 0;
background-color: white;
}
.no-select {
user-select: none;
}
.horizontal-fill {
width: 100%;
min-width: 100%;
}
.table-controls {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
margin-bottom: 5px;
}
.table-controls-search {
min-width: 150px;
width: 25%;
margin-right: 5px;
}
.table-controls-results {
white-space: nowrap;
text-shadow: 0px 0px 3px white;
font-weight: bolder;
font-size: smaller;
margin-right: 5px;
}
.table-controls-navigation {
margin-left: auto;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-end;
min-width: 0;
}
.table-controls-navigation button {
border-radius: 0px;
}
.table-controls-first {
flex: 0 0 auto;
}
.table-controls-previous {
flex: 0 0 auto;
}
.table-controls-pages {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
flex: 1 1 0;
overflow-x: hidden;
}
.table-controls-page {
flex: 0 0 auto;
}
.table-controls-next {
flex: 0 0 auto;
}
.table-controls-last {
flex: 0 0 auto;
}<div class="body-fill">
<div class="columns">
<div class="column-side"></div>
<div class="column-content">
<div class="container">
<div class="table-controls">
<div class="table-controls-search"> <input class="horizontal-fill" type="text" size="1" placeholder="Search/Filter"> </div>
<div class="table-controls-results"> <span>Results: </span> <span class="table-controls-result">00</span> </div>
<div class="table-controls-navigation">
<div class="table-controls-first"> <button class="no-select" disabled="">First</button> </div>
<div class="table-controls-previous"> <button class="no-select" disabled="">Previous</button> </div>
<div class="table-controls-pages">
<div class="table-controls-page"> <button class="no-select" disabled="">1</button> </div>
<div class="table-controls-page"> <button class="no-select">2</button> </div>
<div class="table-controls-page"> <button class="no-select">3</button> </div>
<!-- Comment out these pages and they should justify to the right -->
<div class="table-controls-page"> <button class="no-select">4</button> </div>
<div class="table-controls-page"> <button class="no-select">5</button> </div>
<div class="table-controls-page"> <button class="no-select">6</button> </div>
<div class="table-controls-page"> <button class="no-select">7</button> </div>
<div class="table-controls-page"> <button class="no-select">8</button> </div>
<div class="table-controls-page"> <button class="no-select">9</button> </div>
<div class="table-controls-page"> <button class="no-select">10</button> </div>
<div class="table-controls-page"> <button class="no-select">11</button> </div>
<div class="table-controls-page"> <button class="no-select">12</button> </div>
<div class="table-controls-page"> <button class="no-select">13</button> </div>
<div class="table-controls-page"> <button class="no-select">14</button> </div>
<div class="table-controls-page"> <button class="no-select">15</button> </div>
<div class="table-controls-page"> <button class="no-select">16</button> </div>
<div class="table-controls-page"> <button class="no-select">17</button> </div>
<div class="table-controls-page"> <button class="no-select">18</button> </div>
<div class="table-controls-page"> <button class="no-select">19</button> </div>
<div class="table-controls-page"> <button class="no-select">20</button> </div>
<div class="table-controls-page"> <button class="no-select">21</button> </div>
<div class="table-controls-page"> <button class="no-select">22</button> </div>
<div class="table-controls-page"> <button class="no-select">23</button> </div>
<div class="table-controls-page"> <button class="no-select">24</button> </div>
<div class="table-controls-page"> <button class="no-select">25</button> </div>
<div class="table-controls-page"> <button class="no-select">26</button> </div>
<!-- -->
</div>
<div class="table-controls-next"> <button class="no-select">Next</button> </div>
<div class="table-controls-last"> <button class="no-select">Last</button> </div>
</div>
</div>
</div>
</div>
<div class="column-side"></div>
</div>
</div>