Divs inside of Div Fill Entire Parent DIV Without Display:Table

Question

I am trying to create something similar to a table with rows and cells, but I don't want to use rows and cells, I am currently using DIV elements and everything is going smooth until I try to adjust the width of the inner DIV elements to fill the width of their parent DIV (which would be the row) without having to do exact calculations for the percentage needed.

.container {
    width: 100%;
    display: flex;
    border: 5px solid black;
}

.container > div {
    width: inherit;
    display: inline-flex;
    border: 5px solid red;
}

.container > div > div {
    border: 5px solid green;
    height: 50px
}

<div class="container">
  <div>
    <div>
      <span>TEST</span>
    </div>
    <div>
      <span>TEST</span>
    </div>
  </div>
</div>

What exactly are you trying to achieve? – Ryan Apr 05 '17 at 13:58 — Ryan, Apr 05 '17 at 13:58

score 1 · Accepted Answer · answered Apr 05 '17 at 14:00

From MDN:

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space.

You need to provide flex: 1; to .container > div > div to expand the inner div elements.

.container > div > div {
    border: 5px solid green;
    height: 50px
}

Demo

score 0 · Answer 2 · answered Apr 05 '17 at 14:00

You can use the flex property:

.container {
  width: 100%;
  display: flex;
  border: 5px solid black;
}

.container>div {
  width: inherit;
  display: inline-flex;
  border: 5px solid red;
}

.container>div>div {
  border: 5px solid green;
  height: 50px;
  flex: 1;
}

<div class="container">
  <div>
    <div>
      <span>TEST</span>
    </div>
    <div>
      <span>TEST</span>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Apr 05 '17 at 14:05

perhaps this is what you need? (innermost div should inherit width too)

.container {
    width: 100%;
    display: flex;
    border: 5px solid black;
}

.container > div {
    width: inherit;
    display: inline-flex;
    border: 5px solid red;
}

.container > div > div {
    width: inherit;
    border: 5px solid green;
    height: 50px
}

<div class="container">
  <div>
    <div>
      <span>TEST</span>
    </div>
    <div>
      <span>TEST</span>
    </div>
  </div>
</div>

score 0 · Answer 4 · answered Apr 05 '17 at 14:06

Here i make a change on your CSS but you need to do a flex when you try to autogrow your divs. Look at the .container > div > div styling.

.container {
    width: 100%;
    display: flex;
    border: 5px solid black;
}

.container > div {
    width: inherit;
    display: inline-flex;
    border: 5px solid red;
    
    
}

.container > div > div {
    border: 5px solid green;
    height: 50px;
    flex: 1;
}

<div class="container">
  <div>
    <div>
      <span>TEST</span>
    </div>
    <div>
      <span>TEST</span>
    </div>
  </div>
</div>

Divs inside of Div Fill Entire Parent DIV Without Display:Table

4 Answers4