how to let block element height auto while itself has no child element

Question

Problem: Assume that we have three div elements in a div element as the code below. I want to set the inner div's height auto. For example, if the height of the outer div is 300px and we have three inner elements, the height of the inner element should be 100px.

What I know: If the inner element has no child elements, the height of the inner element is 0px. However, can we change this phenomenon?

Reason: 100px = 300px / 3.

Solver: I can use js to solve this problem. However, I want to know if i can use css to solve this problem.

#outer {
  width: 300px;
  height: 300px;
  ;
  display: flex;
  flex-direction: column;
}

#inner1 {
  background: #ccc;
}

#inner2 {
  background: red;
}

#inner3 {
  background: blue;
}

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
  <div id="inner3"></div>
</div>

Any flexbox tutorial worth its salt would have taught you this technique. — BoltClock, Feb 06 '18 at 13:12
@BoltClock Thank you, I will go to read some tutorial worth its salt. — qiliux, Feb 06 '18 at 13:20

Bhuwan · Accepted Answer · 2018-02-06T13:22:44.050

2

Apply flex:1 to your inner flex elements. flex:1 is a shorthand css of

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

Reference Link

Stack Snippet

#outer {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
}

#outer div {
  flex: 1;
}

#inner1 {
  background: #ccc;
}

#inner2 {
  background: red;
}

#inner3 {
  background: blue;
}

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
  <div id="inner3"></div>
</div>

edited Feb 06 '18 at 13:22

answered Feb 06 '18 at 13:14

Bhuwan

16,525
5
34
57

First off, you answer is not entirely correct, second, this question have been answered many times, so I recommend you start using the _vote/flag as a dupe_, as it is there for a reason. – Asons Feb 06 '18 at 14:00
@LGSon thanks for the suggestion...but why the answer is not entirely correct...I don't see any issue... – Bhuwan Feb 06 '18 at 14:28
Then I think you should read up more on Flexbox before answering questions, as `flex: 1` does not resolve a `flex-basis` value of `0%`, it is `0`, and they are not at all the same, as the the unit value makes a big difference. – Asons Feb 06 '18 at 14:37
@LGSon As I know...all the browsers read `flex:1` as mentioned above(i.e. flex-basis:0%)...[**Screenshot**](https://i.stack.imgur.com/ErSc1.jpg) – Bhuwan Feb 06 '18 at 14:46
The specs. is a valid document: https://www.w3.org/TR/css-flexbox-1/#flex-common ... do not rely on what the browsers tell you – Asons Feb 06 '18 at 14:48

how to let block element height auto while itself has no child element

1 Answers1