Flex child overflowing parent IN TABLE

Question

According to this famous questions and good accepted answer: Why don't flex items shrink past content size? We can prevent the flex items to overflow their parent by setting a min-width of 0 on needed parents and overflow: hidden or auto.

I could verify this in other contexts, but I can't make it work within a table.

Here is a Codepen where I would like the .pagination element to be constrained in the table width and not extending it: https://codepen.io/antoniandre/pen/MWPjGGg?editors=1100

<div class="wrapper">
  <table>
    <thead>
      <tr> 
        <th>first name</th>
        <th>last name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>aa</td>
        <td>aa</td>
      </tr>
      <tr>
        <td>bb</td>
        <td>bb</td>
      </tr>
      <tr>
        <td>cc</td>
        <td>cc</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">
          <div class="pagination">
            <button>1</button>
            ...
            <button>100</button>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

.wrapper {
  margin: auto;
  max-width: 600px;
  background-color: #fef;
}

table {
  width: 100%;
}

tfoot, tfoot tr, tfoot td {
  overflow: auto;
  min-width: 0;
}

.pagination {
  background-color: #efe;
  padding: 8px;
  display: flex;
  overflow: auto;
  min-width: 0;
}

There are lots of similar questions that I have seen Fitting child into parent, but not in a table, and this seems to be the issue.

I don't mind adding some wrappers in the markup or not using flex. Grid or inline-block can also be an option if it works without fixed max-width.

Here is a screenshot of how it looks like in its original context, not overflowing in that case.

In normal layout mode, table columns _get_ their width from the content, and if you know want to limit the width of the content based on the column width ... that's a bit of a catch-22. `table-layout:fixed;` can prevent that, but you'd have to check if the rest then still gets as wide as you want it to. — CBroe, Apr 19 '23 at 10:44
Thanks. That's right, fixed table layout is not what I am looking for since I want to benefit from the table features for the cells in tbody :) If there could be a way with more markup, I don't mind creating extra wrappers around pagination though. — antoni, Apr 19 '23 at 10:48
Does the pagination absolutely have to be in the tfoot? Because if you just put it after the table, I think it should behave as you want it to already. — CBroe, Apr 19 '23 at 10:59
Good point. Ideally it would have to be in the tfoot because it's part of a table component in a library. There can be an option to display the table footer at the end of the rows or sticky at the bottom — antoni, Apr 19 '23 at 11:06

rozsazoltan · Answer 1 · 2023-04-19T11:32:21.887

I know it's a pretty clumsy solution, but it was my first thought. For now, I'll leave it here, it serves its purpose. I'm still thinking about how to solve it more elegantly without modifying the HTML code.

In relation to the relative position, the absolutely positioned element can be aligned to its parent instead of the entire page.

.wrapper {
  margin: auto;
  max-width: 600px;
  background-color: #fef;
}

table {
  width: 100%;
}

/* added for scroll --------------- */
tfoot td {
  position: relative;
}
/* -------------------------------- */

.pagination {
  /* added for scroll ------------- */
  position: absolute;
  width: 100%;
  overflow: auto;
  /* ------------------------------ */
  
  /* added for padding ------------ */
  padding: 8px;
  box-sizing: border-box;
  /* ------------------------------ */
  
  display: flex;
  background-color: #efe;
}

<div class="wrapper">
  <table>
    <thead>
      <tr> 
        <th>first name</th>
        <th>last name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>aa</td>
        <td>aa</td>
      </tr>
      <tr>
        <td>bb</td>
        <td>bb</td>
      </tr>
      <tr>
        <td>cc</td>
        <td>cc</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">
          <div class="pagination">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>10</button>
            <button>11</button>
            <button>12</button>
            <button>13</button>
            <button>14</button>
            <button>15</button>
            <button>16</button>
            <button>17</button>
            <button>18</button>
            <button>19</button>
            <button>20</button>
            <button>21</button>
            <button>22</button>
            <button>23</button>
            <button>24</button>
            <button>25</button>
            <button>26</button>
            <button>27</button>
            <button>28</button>
            <button>29</button>
            <button>30</button>
            <button>31</button>
            <button>32</button>
            <button>33</button>
            <button>34</button>
            <button>35</button>
            <button>36</button>
            <button>37</button>
            <button>38</button>
            <button>39</button>
            <button>40</button>
            <button>41</button>
            <button>42</button>
            <button>43</button>
            <button>44</button>
            <button>45</button>
            <button>46</button>
            <button>47</button>
            <button>48</button>
            <button>49</button>
            <button>50</button>
            <button>51</button>
            <button>52</button>
            <button>53</button>
            <button>54</button>
            <button>55</button>
            <button>56</button>
            <button>57</button>
            <button>58</button>
            <button>59</button>
            <button>60</button>
            <button>61</button>
            <button>62</button>
            <button>63</button>
            <button>64</button>
            <button>65</button>
            <button>66</button>
            <button>67</button>
            <button>68</button>
            <button>69</button>
            <button>70</button>
            <button>71</button>
            <button>72</button>
            <button>73</button>
            <button>74</button>
            <button>75</button>
            <button>76</button>
            <button>77</button>
            <button>78</button>
            <button>79</button>
            <button>80</button>
            <button>81</button>
            <button>82</button>
            <button>83</button>
            <button>84</button>
            <button>85</button>
            <button>86</button>
            <button>87</button>
            <button>88</button>
            <button>89</button>
            <button>90</button>
            <button>91</button>
            <button>92</button>
            <button>93</button>
            <button>94</button>
            <button>95</button>
            <button>96</button>
            <button>97</button>
            <button>98</button>
            <button>99</button>
            <button>100</button>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

Thanks for that solution @rozsazoltan. It's actually something that would work if there was nothing else in the footer. but I actually simplified the Codepen to isolate the problem where in the real code, there are also other elements of unknown width. I have updated my question to add a screenshot — antoni, Apr 19 '23 at 16:13

Flex child overflowing parent IN TABLE

1 Answers1