Horizontally scroll table to fit and shrink parent

Question

I have a page divided into sidebar and content with flex display where sidebar has 0.15 flex and content 0.85. This page should be full width of viewport.

My problem is when i try to add a table into page content, I want to have a table to fit the parent div, in our case it is content and have horizontall scroll bar if the table doesn't fit.

Currently, the table makes content just stretch horizontally and that is not what i wanted. I want to be able resize window for example down and the table should shrink as well.

Please check js fiddle for example:

http://jsfiddle.net/kopwmsuq/7/

My code looks like this:

.page {
  width: 100%;
  height: 100%;
  display: flex;
}

.sidebar {
  flex: 0.15;
  background-color: red;
}

.content {
  flex: 0.85;
  background-color: blue;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.step-content {
  flex: 1;
}

.step-footer {
  display: block;
}

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

button {
  display: block;
}

  <div class="page">
    <div class="sidebar">
      // sidebar buttons
    </div>
    <div class="content">
      <div class="step-content">
        whatever
        <div>
          <table>
            // BIG TABLE THAT STRETCHS WHOLE PAGE CONTENT
          </table>
        </div>
      </div>
      <div class="step-footer">
      </div>
    </div>
</div>

I think you're looking for a `max-width:95%` on `.content { }`? And add then also a percentage `max-width:5%;` to the other section. — JeroenE, Nov 15 '18 at 12:08
not quite, i need to have fixed sidebar and content to fill the rest of the page and that content should be shrinkable. — franzp, Nov 15 '18 at 12:29
Add `min-width: 0` to `.content`. http://jsfiddle.net/kopwmsuq/8/ — Michael Benjamin, Nov 15 '18 at 19:37

score 1 · Answer 1 · edited Nov 15 '18 at 13:09

1

.flex-container {
    display: flex;
    flex-wrap: nowrap;
}

.flex-container > div {
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

HTML

<div class="flex-container">
    <div class="sidebar">1</div>
    <div class="content">            
        <table>
            /// table code
        </table>
    </div>
</div>

edited Nov 15 '18 at 13:09

James Wrcsti

220
1
8

answered Nov 15 '18 at 12:17

Ravi Chauhan

1,409
13
26

Horizontally scroll table to fit and shrink parent

1 Answers1