【发布时间】：2017-06-03 12:14:24
【问题描述】：
我在让 Flexbox 正确确定元素大小的优先级时遇到了一些问题。
通常有两件事可以控制元素的大小：
- 容器：推入内容并可能导致内容溢出（如果内容过多）。
- 内容：向容器推出并可能导致容器调整大小。
这是 Layout 101，直到今天，我仍然很困惑为什么 HTML/CSS 无法直接控制元素大小的优先级。我觉得我只需要把东西放在一起，并希望浏览器以我想要的方式呈现大小。反正我跑题了……
.collapse {
display: none !important;
}
.horizontal-fill {
width: 100%;
min-width: 100%;
box-sizing: border-box;
}
.container {
text-align: center;
}
.inline-center {
display: inline-block;
min-width: 600px;
text-align: left;
}
.table-container {
border-color: black;
border-width: 1px;
border-style: solid;
padding: 5px;
background-color: lightgray;
}
.table-controls {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
align-items: baseline;
}
.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-direction: row;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
flex: 1 1 0;
}
.table-controls-navigation button {
border-radius: 0px;
}
.table-controls-pages {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
flex: 1 1 0;
/** Enabling this causes the page buttons to start overflowing */
/** which is the desired behavior */
/** width: 0px; */
/** However, doing so causes the page buttons to float to the left */
/** even when the page buttons don't overflow. */
overflow-x: hidden;
}<div class="container">
<div class="inline-center">
<div class="table-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">25</span>
</div>
<div class="table-controls-navigation">
<div>
<button disabled="">First</button>
</div>
<div>
<button disabled="">Previous</button>
</div>
<div class="table-controls-pages">
<div class="table-controls-page">
<button disabled="">1</button>
</div>
<div class="table-controls-page">
<button>2</button>
</div>
<div class="table-controls-page">
<button>3</button>
</div>
<!-- These comments are used to comment out a bunch of the page buttons -->
<!-- Doing so when (width: 0px) results in the page buttons continuing to "float" left -->
<!-- -->
<div class="table-controls-page">
<button>4</button>
</div>
<div class="table-controls-page">
<button>5</button>
</div>
<div class="table-controls-page">
<button>6</button>
</div>
<div class="table-controls-page">
<button>7</button>
</div>
<div class="table-controls-page">
<button>8</button>
</div>
<div class="table-controls-page">
<button>9</button>
</div>
<div class="table-controls-page">
<button>10</button>
</div>
<!-- -->
</div>
<div>
<button>Next</button>
</div>
<div>
<button>Last</button>
</div>
</div>
</div>
</div>
</div>请原谅大量的代码。
主要焦点是栏左侧的“页面按钮”。 我希望页面按钮填充 剩余 空间并在无法容纳时溢出。 （只有编号的按钮！） 但是如果它们能够适应而不溢出，那么所有的按钮都需要对齐到右。
我似乎无法让布局具有这种行为。要么按钮无法溢出并最终调整容器大小，要么（编号的）按钮完全消失。
【问题讨论】：