css flex-item default height issue

Question

i am learning CSS flex-box stuff and when i play around with it i have found a wired thing:

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

.box1 {
  border: 2px solid red;
  width: 30%;
  height: 500px;
}

.box2 {
  border: 2px solid blue;
  width: 40%;
}

<body>
  <div class="container">
    <div class="box box1">
      <p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
    </div>

    <div class="box box2">
      <p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
    </div>

    <div class="box box3">
      <p class="text">I do not remember how and when I discovered her music, but when I heard her, I was moved by…</p>
    </div>
  </div>
</body>

the wired thing is: i have set the height of box1 element to 500px only, but from the result, i saw the box2 got the same height as 500px default even i didn't set any height value on it. And then i changed the box2 height value as 300px and didn't give a fix height on box3:

    .box1{
        border: 2px solid red;
        width: 30%;
        height: 500px;
    }

    .box2{
        border: 2px solid blue;
        width: 40%;
        height:300px;
    }


    .box3{
     border: 2px solid blue;
     width:30%;
    }

this time from the result i found the height of box3 was 500px so my questions are:

after calling container as display:flex, is that the flex items with no pre-height set will inherit the other flex item with biggest hight value?
after calling container as display:flex, may i consider all its contained items will behave like inline-blockelements?

score 0 · Answer 1 · answered Nov 04 '17 at 03:20

1. After calling container as display:flex, is that the flex items with no pre-height set will inherit the other flex item with biggest height value?

All items in row will take the largest height of them by default.

2. After calling container as display:flex, may i consider all its contained items will behave like inline-blockelements?

Yes, you can use display: inline-flex (find inline-flex value in this page for more info).

css flex-item default height issue

1 Answers1