How to remove flex-items inheriting parent height

Question

I have the following layout:

.content-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

What I would like to accomplish is for .zavod and .ekipa to have different heights. Now this works inside a single flex container, but when I nest multiple ones it does not work.

What am I doing wrong?

score 6 · Accepted Answer · answered Feb 15 '17 at 12:22

Set the align-items property to flex-start on your .view-content container. align-items defaults to stretch which is why both .zavod and .ekipa, as flex children are "stretched" to match the height of each other:

.content-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

Here's a lovely guide on how to flexbox which I refer to from time to time.

Rahul · Answer 2 · 2017-02-15T12:35:09.767

If I understand your question code will be like this. Just add .content-container{flex-direction: column;}, .view-content{align-items: flex-start;flex-direction: row;}. That is it. You need read csstricks flexbox guide.

.content-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.view-content {
  align-items: flex-start; /* If you want to set two column top align */
  /* align-items: center; If you want to set tow column vertically center */
  /* align-items: flex-end; If you want to set column align on bottom center */
  /* align-items: stretch; If you want to set two column same height */
  /* align-items: baseline; If you want to set two column align by text align */
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

G-Cyrillus · Answer 3 · 2017-02-15T12:31:29.393

For infos and in some cases, you can also reset the margin on the side(s) you want it to stand away from

.content-container {
  min-height: 100vh;
  background:gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}
section {
  margin :auto 0;
  }

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

score 0 · Answer 4 · answered Feb 15 '17 at 12:26

Add align-items: center; to the container

.content-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

How to remove flex-items inheriting parent height

4 Answers4