Table Pages: Overflowing with Flexbox

Question

My problem seems to be related to the linked duplicate but the answer on that post did not solve my problem!

My Problem

I am trying to implement a page system for a table and the CSS is driving me crazy.

Run the code example below and you'll see a search bar, a result number label and some page control buttons. As more and more page buttons are added, the space is filled up and the entire table-controls div starts to grow. However, I'm trying to get it so that the table-controls-pages div overflows "hidden" instead of growing the parent div.

For some reason, this code that I have causes the page buttons to start to overflow but then it only gets so far and starts growing the parent div again. I don't know why it would do that, it seems so random. My guess is it has to do with the size of the search and result elements...

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

Edit:

The solution to add overflow: hidden or min-width: 0 to .table-controls-navigation wasn't working on my actual code, so here is additional code that more closely resembles my site layout.

It seems like the CSS table layout that I am using is causing some serious problems with 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>

Edit 2:

I switched my column layout to use only Flexbox but it doesn't seem like that has helped...

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

I would have never thought to do that. It doesn't make sense why adding it to the navigation div works since the pages are the only thing that i want to hide the overflow of. — Bradley Odell, Mar 10 '17 at 23:10
It's explained in the duplicate. By default, a flex item cannot be smaller than the size of its content. You need to override the default, or the item will overflow the container on smaller screens. — Michael Benjamin, Mar 10 '17 at 23:11
For some reason, setting `overflow: hidden` to `.table-controls-navigation` is not fixing the problem on my actual code... — Bradley Odell, Mar 10 '17 at 23:35
I added some new code that's still not working correctly even after the `overflow: hidden` fix. — Bradley Odell, Mar 10 '17 at 23:58
Yeah, that's pretty hard core. You're mixing and nesting lots of `display` values. Something is not working as you would expect. But keep in mind, even if you finally get it to work in one browser, that doesn't mean it will work in others. If you can, get rid of all the `display: table-cell` and `display: block` rules, and stick with `display: flex` all the way through. — Michael Benjamin, Mar 11 '17 at 00:12
@Michael_B I removed the table layout from the CSS but I'm still getting the same problem with the overflow. Do you have any other suggestions? — Bradley Odell, Mar 21 '17 at 17:45
You have the overall width of the container set to 60%. That doesn't leave much room for any page control buttons: https://jsfiddle.net/5coe9bop/2/ — Michael Benjamin, Mar 21 '17 at 18:00
Oh interesting... **that** makes sense! So the Flexbox 'minimum size' has to be disabled all the way up the document tree using `overflow: hidden` or `min-width: 0`. Thanks for your help! — Bradley Odell, Mar 21 '17 at 18:19
@Michael_B Adding `overflow: hidden` or `min-width: 0` to the `column-content` div causes it to not grow to fit the containing content anymore. I only want to exclude the table page buttons from growing the container, not everything. — Bradley Odell, Mar 21 '17 at 21:33

Table Pages: Overflowing with Flexbox

0 Answers0