Flexbox：将内容限制为容器大小，必要时溢出

Question

我在使Flexbox正确确定元素大小的优先顺序方面遇到了一些麻烦。

通常，有两件事可以控制元素的大小调整：

1. 容器：推送内容并可能导致内容溢出（如果内容太多）。
2. 内容：推出容器并可能导致容器调整大小。

这是布局101，直到今天，我仍然困惑为什么HTML / CSS无法直接控制元素大小的优先级。我觉得我只需要把东西放在一起，并希望浏览器以我想要的方式呈现大小。无论如何，我离题了......

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

请原谅大量代码。

主要关注的是＆＃34;页面按钮＆＃34;在酒吧的左侧。 我希望页面按钮填充剩余空间，如果它们无法适应则会溢出。 （只有编号按钮！） 但是如果他们能够在没有溢出的情况下适应，那么所有按钮都需要与正确对齐。

我似乎无法让布局有这种行为。按钮无法溢出并最终调整容器大小，或者（编号）按钮完全消失。

Answer 1

我能够通过在CSS .table-controls-navigation中将 flex-wrap：nowrap 更改为 flex-wrap：wrap 来解决这个问题。 EM>

此外， flex：1 1 0 已从 .table-controls-navigation 中删除。

这似乎阻止了任何孩子溢出，因为它迫使容器调整大小以适应所有内容。

＆＃13;

＆＃13;

.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: wrap;
  align-content: stretch;
  align-items: stretch;
}
.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;