1

im testing flexboxes with css. Until now i thought it would be easy but i have a little problem.

As you can see in the example below, i built a flexbox layout. the layout contains a site-header on the top and a menu on the left. the content should be shown in the middle. I whant the site to always fit the the current browsersize. But if my table gets to high (to many entrys for example) my div "tbl-content" doesnt fit to page any more. How can i make this container scrollable?

html,
body {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 300px;
  min-height: 200px;
  font-family: sego;
  font-size: 14px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#header {
  width: 100%;
  flex-shrink: 0;
  height: 55px;
  background-color: #333;
  display: flex;
  flex-direction: row;
}

#site {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  background-color: #eee;
}

#menu {
  width: 150px;
  background-color: #333;
}

#inhalt {
  flex-grow: 1;
  background-color: #eee;
  margin: 0px;
}

table {
  width: 100%
}

th {
  text-align: left;
}

.tbl-content tr {
  height: 200px;
}
<div class="wrapper">
  <div id="header">Siteheader</div>
  <div id="site">
    <div id="menu">Menu</div>
    <div id="inhalt">
      <div class="tbl-header">
        <table cellpadding="0" cellspacing="0" border="0">
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbl-content">
        <table cellpadding="0" cellspacing="0" border="0">
          <tbody>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Martin S.
  • 142
  • 9

2 Answers2

0

Add this to your code:

#inhalt {
  display: flex;
  flex-direction: column;
}

.tbl-content {
  overflow: auto;
}


html,
body {
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0px;
  margin: 0px;
  min-width: 300px;
  min-height: 200px;
  font-family: sego;
  font-size: 14px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#header {
  width: 100%;
  flex-shrink: 0;
  height: 55px;
  background-color: #333;
  display: flex;
  flex-direction: row;
}

#site {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  background-color: #eee;
}

#menu {
  width: 150px;
  background-color: #333;
}

#inhalt {
  flex-grow: 1;
  background-color: #eee;
  margin: 0px;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}

.tbl-content {
  overflow: auto;         /* NEW */
}

table {
  width: 100%
}

th {
  text-align: left;
}

.tbl-content tr {
  height: 200px;
}
<div class="wrapper">
  <div id="header">Siteheader</div>
  <div id="site">
    <div id="menu">Menu</div>
    <div id="inhalt">
      <div class="tbl-header">
        <table cellpadding="0" cellspacing="0" border="0">
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
              <th>Header 4</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbl-content">
        <table cellpadding="0" cellspacing="0" border="0">
          <tbody>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
            <tr>
              <td>aaa</td>
              <td>bbb</td>
              <td>ccc</td>
              <td>ddd</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Im using firefox 58.0.1 (64-Bit) With my browser, the content stil makes the entire page scrollable, not only the one container. – Martin S. Feb 09 '18 at 11:28
  • Understood. My solution works in Chrome. For it to work in FF and Edge also add `min-height: 0` to the flex items. – Michael Benjamin Feb 09 '18 at 11:42
  • Okay, in Chrome it works. But witch items i should give min-height:0? The tbl-content & header? The menu & inhalt? or header and site? Sorry for so mutch questions. I don't get it. Sorry. Edit: The right answer is: ALL of them. Thank you verry mutch. It works. – Martin S. Feb 09 '18 at 11:53
  • See my answer here for a detailed explanation. In particular, see browser info at the bottom. https://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Feb 09 '18 at 13:30
0

If you are using felx-box then you shouldn't use tables for the purpose. The div or li are simple and easy to read. It also refactors your code and make your code understandable.

Farhan
  • 1,445
  • 16
  • 24