1

I have two child columns of flex parent. I want my second column fit in remaining space and table inside it has a scroll. But the second column has too much width and therefore the table haven't scroll. When I remove display:flex in parent, the table works as I want. But I need this behavior with a flex parent. You can see an example by link. You can see it when the width of viewport less than 740px

* {
  box-sizing: border-box;
}
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: inherit;
}
ul,
li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
main {
  flex: 1 1;
}
/*! CSS Used from: Embedded */
.main-wrap {
  display: flex;
  min-height: calc(100vh - 70px);
  background: var(--additional-black);
}
/*! CSS Used from: Embedded */
aside {
  background: var(--main-black);
  padding: 10px 20px;
  font-size: 20px;
}
aside li {
  margin-bottom: 5px;
}
/*! CSS Used from: Embedded */
.MuiTable-root {
  width: 100%;
  display: table;
  border-spacing: 0;
  border-collapse: collapse;
}
/*! CSS Used from: Embedded */
.MuiTableBody-root {
  display: table-row-group;
}
/*! CSS Used from: Embedded */
.MuiTableCell-root {
  display: table-cell;
  padding: 16px;
  font-size: 0.875rem;
  text-align: left;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.43;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
  letter-spacing: 0.01071em;
  vertical-align: inherit;
}
.MuiTableCell-head {
  color: rgba(0, 0, 0, 0.87);
  font-weight: 500;
  line-height: 1.5rem;
}
.MuiTableCell-body {
  color: rgba(0, 0, 0, 0.87);
}
.MuiTableCell-sizeSmall {
  padding: 6px 24px 6px 16px;
}
.MuiTableCell-sizeSmall:last-child {
  padding-right: 16px;
}
.MuiTableCell-alignRight {
  text-align: right;
  flex-direction: row-reverse;
}
/*! CSS Used from: Embedded */
.MuiTableContainer-root {
  width: 100%;
  overflow-x: auto;
}
/*! CSS Used from: Embedded */
.MuiTableHead-root {
  display: table-header-group;
}
/*! CSS Used from: Embedded */
.MuiTableRow-root {
  color: inherit;
  display: table-row;
  outline: 0;
  vertical-align: middle;
}
/*! CSS Used from: Embedded */
.MuiPaper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}
.MuiPaper-rounded {
  border-radius: 4px;
}
.MuiPaper-elevation1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
/*! CSS Used from: Embedded */
.makeStyles-table-1 {
  min-width: 650px;
}
<div class="main-wrap">
  <aside class="">
    <ul>
      <li><a href="/">Sample text</a></li>
    </ul>
  </aside>
  <main>
    <div class="MuiPaper-root MuiTableContainer-root MuiPaper-elevation1 MuiPaper-rounded" style="
">
      <table class="MuiTable-root makeStyles-table-1" aria-label="a dense table">
        <thead class="MuiTableHead-root">
          <tr class="MuiTableRow-root MuiTableRow-head">
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeSmall" scope="col">Dessert (100g serving)
            </th>
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight MuiTableCell-sizeSmall" scope="col">
              Calories</th>
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight MuiTableCell-sizeSmall" scope="col">
              Fat&nbsp;(g)</th>
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight MuiTableCell-sizeSmall" scope="col">
              Carbs&nbsp;(g)</th>
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight MuiTableCell-sizeSmall" scope="col">
              Protein&nbsp;(g)</th>
          </tr>
        </thead>
        <tbody class="MuiTableBody-root">
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Frozen yoghurt</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">159</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">6</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">24</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">4</td>
          </tr>
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Ice cream sandwich</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">237</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">9</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">37</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">4.3</td>
          </tr>
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Eclair</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">262</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">16</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">24</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">6</td>
          </tr>
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Cupcake</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">305</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">3.7</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">67</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">4.3</td>
          </tr>
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Gingerbread</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">356</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">16</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">49</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">3.9</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>
Huangism
  • 16,278
  • 7
  • 48
  • 74
Vsevolod Fedorov
  • 481
  • 1
  • 7
  • 20
  • 1
    Does this answer your question? [Why don't flex items shrink past content size?](https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size) – Mr T Feb 06 '20 at 16:55

1 Answers1

0

If you add overflow: auto to .main your table will scroll when it exceeds the maximum available width. Otherwise, no scrollbar will be rendered.

* {
  box-sizing: border-box;
}
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: inherit;
}
ul,
li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
main {
  flex: 1 1;
  overflow: auto;
}
/*! CSS Used from: Embedded */
.main-wrap {
  display: flex;
  min-height: calc(100vh - 70px);
  background: var(--additional-black);
}
/*! CSS Used from: Embedded */
aside {
  background: var(--main-black);
  padding: 10px 20px;
  font-size: 20px;
}
aside li {
  margin-bottom: 5px;
}
/*! CSS Used from: Embedded */
.MuiTable-root {
  width: 100%;
  display: table;
  border-spacing: 0;
  border-collapse: collapse;
}
/*! CSS Used from: Embedded */
.MuiTableBody-root {
  display: table-row-group;
}
/*! CSS Used from: Embedded */
.MuiTableCell-root {
  display: table-cell;
  padding: 16px;
  font-size: 0.875rem;
  text-align: left;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.43;
  border-bottom: 1px solid rgba(224, 224, 224, 1);
  letter-spacing: 0.01071em;
  vertical-align: inherit;
}
.MuiTableCell-head {
  color: rgba(0, 0, 0, 0.87);
  font-weight: 500;
  line-height: 1.5rem;
}
.MuiTableCell-body {
  color: rgba(0, 0, 0, 0.87);
}
.MuiTableCell-sizeSmall {
  padding: 6px 24px 6px 16px;
}
.MuiTableCell-sizeSmall:last-child {
  padding-right: 16px;
}
.MuiTableCell-alignRight {
  text-align: right;
  flex-direction: row-reverse;
}
/*! CSS Used from: Embedded */
.MuiTableContainer-root {
  width: 100%;
  overflow-x: auto;
}
/*! CSS Used from: Embedded */
.MuiTableHead-root {
  display: table-header-group;
}
/*! CSS Used from: Embedded */
.MuiTableRow-root {
  color: inherit;
  display: table-row;
  outline: 0;
  vertical-align: middle;
}
/*! CSS Used from: Embedded */
.MuiPaper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}
.MuiPaper-rounded {
  border-radius: 4px;
}
.MuiPaper-elevation1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
/*! CSS Used from: Embedded */
.makeStyles-table-1 {
  min-width: 650px;
}
<div class="main-wrap">
  <aside class="">
    <ul>
      <li><a href="/">Sample text</a></li>
    </ul>
  </aside>
  <main>
    <div class="MuiPaper-root MuiTableContainer-root MuiPaper-elevation1 MuiPaper-rounded" style="
">
      <table class="MuiTable-root makeStyles-table-1" aria-label="a dense table">
        <thead class="MuiTableHead-root">
          <tr class="MuiTableRow-root MuiTableRow-head">
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeSmall" scope="col">Dessert (100g serving)
            </th>
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight MuiTableCell-sizeSmall" scope="col">
              Calories</th>
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight MuiTableCell-sizeSmall" scope="col">
              Fat&nbsp;(g)</th>
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight MuiTableCell-sizeSmall" scope="col">
              Carbs&nbsp;(g)</th>
            <th class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignRight MuiTableCell-sizeSmall" scope="col">
              Protein&nbsp;(g)</th>
          </tr>
        </thead>
        <tbody class="MuiTableBody-root">
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Frozen yoghurt</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">159</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">6</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">24</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">4</td>
          </tr>
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Ice cream sandwich</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">237</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">9</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">37</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">4.3</td>
          </tr>
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Eclair</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">262</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">16</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">24</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">6</td>
          </tr>
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Cupcake</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">305</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">3.7</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">67</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">4.3</td>
          </tr>
          <tr class="MuiTableRow-root">
            <th class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall" scope="row">Gingerbread</th>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">356</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">16</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">49</td>
            <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall">3.9</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>
Wex
  • 15,539
  • 10
  • 64
  • 107