Div grow out of bounds if content is too much

Question

I have a parent element which has a max-width but inside I have a table that I want to expand past that max-width, but only if it's necessary because of the content on the table.

Here's a fiddle so you can see: https://jsfiddle.net/z6nbc75g/

Try clicking the "add columns" button a few times to see how when you add too many, they start getting compressed instead of making the table wider.

Here's the code:

.parent {
  width: 100%;
  max-width: 20rem;
}

.table .row {
  display: flex;
  border: 1px solid blue;
  padding: 4px;
}

.table .col {
  border: 1px solid red;
  padding: 2px;
}

<div class="parent">
  <div class="table">
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
  </div>
</div>

@Ingus nope, my case is actually the opposite and totally different — nick, Apr 02 '19 at 12:58
Is it an option for you to set a ` min-width` on `.table .col`? — Mark Baijens, Apr 02 '19 at 13:04
What’s the desired outcome? Horizontal scroll in parent? Columns visible outside parent? — Strelok, Apr 02 '19 at 13:06
Add `flex-shrink: 0;` to your `.table .col{}` rule and it won't shrink — Asons, Apr 02 '19 at 13:20
And do note, for the `.parent` to grow along with the content it needs to be displayed `inline-flex/block`. — Asons, Apr 02 '19 at 13:31
And FYI, if an element is suppose to expand beyond a given width, do not use `max-width`, instead use `min-width` — Asons, Apr 02 '19 at 13:48

score 1 · Answer 1 · answered Apr 02 '19 at 13:05

1

You can use min-width: max-content: https://developer.mozilla.org/en-US/docs/Web/CSS/width#max-content

Fiddle: https://jsfiddle.net/r84q7nvj/

answered Apr 02 '19 at 13:05

Jesper Johansson

599
3
14

This works but the browser support is terrible :/ – nick Apr 02 '19 at 13:17
@nick I see. I have added an alternative answer. – Jesper Johansson Apr 02 '19 at 13:26

score 0 · Answer 2 · edited Apr 02 '19 at 13:01

0

You can make change in the style of row. Add flex-wrap property.

.table .row {
  display: flex;
  border: 1px solid blue;
  padding: 4px;
  flex-flow: row wrap;
}

edited Apr 02 '19 at 13:01

Mark Baijens

13,028
11
47
73

answered Apr 02 '19 at 13:01

Ankit Shah

36
2

DKyleo · Answer 3 · 2019-04-02T13:18:58.633

For what you're looking for, a way to handle this would be to make your .parent element as an inline-block (so it only occupies the width of the child elements), then prevent wrapping on the columns (assuming you want all of your content within a column to be on the same line - if you don't, the table will still expand until it reaches the width of the page, then cause the text to wrap within the columns).

Snippet below - I've added in the button from your jsfiddle so you can test this out :)

document.querySelector('button').addEventListener('click', () => {
 let rows = document.querySelectorAll('.row');
  
  rows.forEach(row => {
   let col = document.createElement('div');
    col.classList.add('col');
    col.textContent = 'lorem ipsum';
    
    row.appendChild(col);
  });
});

.parent {
  display:inline-block;
}

.table .row {
  display: flex;
  border: 1px solid blue;
  padding: 4px;
}

.table .col {
  border: 1px solid red;
  padding: 2px;
}

<div class="parent">
  <div class="table">
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
    <div class="row">
      <div class="col">lorem ipsum</div>
      <div class="col">lorem ipsum</div>
    </div>
  </div>
</div>

<button>Add columns</button>

It works but the row width doesn't change, it just overflows — nick, Apr 02 '19 at 13:18
Hi @nick, I've pulled out the `white-space:nowrap` - is that more what you're looking for? — DKyleo, Apr 02 '19 at 13:19

score 0 · Answer 4 · answered Apr 02 '19 at 13:26

0

You could also solve this using display: inline-flex on the parent together with min-width: 200px and flex-basis on its children: https://jsfiddle.net/cnxgruzt/

answered Apr 02 '19 at 13:26

Jesper Johansson

599
3
14

Div grow out of bounds if content is too much

4 Answers4