Flex grid div changes width when table inside

Question

I have a flex grid with 2 columns. The columns should has proportionally fixed width 70% (main-content) and 30% (side-content) and for that I've used the flex property accordingly:

.content {
    padding-top: 5px;
    flex: 1;
    display: flex;
    flex-direction: row;
}

.main-content {
    flex: 2;
  background-color: yellow;
}

.side-content {
    flex: 1;
    margin-left: 2px;
    padding-left: 20px;
    padding-right: 20px;
  background-color: green;
}

My problem arises when I put a table inside the side-content. For some reason the widths are changed and I loose the 70/30 proportioality. Here is the code:

<div class='content'>
  <div class='main-content'>
  THIS IS A MAIN CONTENT AREA THAT SHOUDN'T CHANGE WIDTH
  </div>
  <div class='side-content'>
  THIS IS A SIDE CONTENT AREA THAT SHOUDN'T CHANGE WIDTH

  <table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>

  </tbody>

  </table>
  </div>
</div>

How can I get the side-content div not to expand in any condition, always keeping the 70/30 relation ?

JSFiddle here

An initial setting on flex items is `min-width: auto`. This means that items cannot be smaller than their content. You can override this default with `min-width: 0` or `overflow` with any value other than `visible`. https://jsfiddle.net/sgh9zodp/2/ — Michael Benjamin, Oct 22 '17 at 12:51

Asons · Accepted Answer · 2017-10-22T12:54:07.190

You misunderstood how Flexbox works, and neither of your samples keep the same relation (70%/30%), and if you size the first enough you'll see they don't.

The reason is the min-width, which defaults to auto and prevent a flex items to be smaller than its content.

Change your rules to this if you want 70%/30%

.main-content {
  flex: 0 0 70%;                   /*  changed  */
  background-color: yellow;
  min-width: 0;                    /*  added  */
}

.side-content {
  flex: 0 0 30%;                   /*  changed  */
  margin-left: 2px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: green;
  min-width: 0;                    /*  added  */
}

Stack snippet

.content {
  padding-top: 5px;
  flex: 1;
  display: flex;
  flex-direction: row;
}

.main-content {
  flex: 0 0 70%;                   /*  changed  */
  background-color: yellow;
  min-width: 0;                    /*  added  */
}

.side-content {
  flex: 0 0 30%;                   /*  changed  */
  margin-left: 2px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: green;
  min-width: 0;                    /*  added  */
}

<h2>
Normal behaviour
</h2>
<div class='content'>
  <div class='main-content'>
    MAIN CONTENT
  </div>
  <div class='side-content'>
    SIDE CONTENT
  </div>
</div>


<h2>
Not proportional content
</h2>
<div class='content'>
  <div class='main-content'>
    THIS IS A MAIN CONTENT AREA THAT SHOUDN'T CHANGE WIDTH
  </div>
  <div class='side-content'>
    THIS IS A SIDE CONTENT AREA THAT SHOUDN'T CHANGE WIDTH

    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
        </tr>

      </tbody>

    </table>
  </div>
</div>

Or like this to keep 2 of 3, 1 of 3. Do note that you need to set both flex-grow and flex-shrink, as the flex-shrink defaults to 1 and will kick in when there is no space left (distribute the negative space)

.main-content {
  flex: 2 2 0;                     /*  changed  */
  background-color: yellow;
  min-width: 0;                    /*  added  */
}

.side-content {
  flex: 1 1 0;                     /*  changed  */
  margin-left: 2px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: green;
  min-width: 0;                    /*  added  */
}

Stack snippet

.content {
  padding-top: 5px;
  flex: 1;
  display: flex;
  flex-direction: row;
}

.main-content {
  flex: 2 2 0;                     /*  changed  */
  background-color: yellow;
  min-width: 0;                    /*  added  */
}

.side-content {
  flex: 1 1 0;                     /*  changed  */
  margin-left: 2px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: green;
  min-width: 0;                    /*  added  */
}

<h2>
Normal behaviour
</h2>
<div class='content'>
  <div class='main-content'>
    MAIN CONTENT
  </div>
  <div class='side-content'>
    SIDE CONTENT
  </div>
</div>


<h2>
Not proportional content
</h2>
<div class='content'>
  <div class='main-content'>
    THIS IS A MAIN CONTENT AREA THAT SHOUDN'T CHANGE WIDTH
  </div>
  <div class='side-content'>
    THIS IS A SIDE CONTENT AREA THAT SHOUDN'T CHANGE WIDTH

    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
        </tr>

      </tbody>

    </table>
  </div>
</div>

Flex grid div changes width when table inside

1 Answers1