CODEWITHSUNDEEP
cssflexboxtailwind-css
Alex
Alex

Reputation: 181

Flex: Same hight of container as two containers beside (vue/tailwind)

I have three flex containers with same width. Inside the third Container i have some elements in flex-col and at the bottom of the third container i have two more containers (C1, C2) and beside this containers another one C3 which i want to have the same hight as containers C1 and C2 need. But i cant get this work. With flex-1 i only archive that C1/C2 and C3 takes the same width beside each others.

Here is my code (only for the right big container):

 <div class="flex-1">
      <div class="ml-4 flex flex-1 flex-col">
        <FirstContainer />
        <SecondContainer />
        <div class="flex flex-row flex-1">
          <div class="flex flex-col flex-1">
            <C1 />
            <C2 />
          </div>
          <div class="flex-1 ml-4 h-full">
            <C3 />
          </div>
        </div>
      </div>
    </div>

Here is how it should look like: enter image description here

Upvotes: 1

Views: 1170

Answers (2)

StepUp
StepUp

Reputation: 38134

It is possible to use flex and set child element to flex: 1 to fill the remain space:

body {
    margin: 0;
}

.container {
   display: flex;
   height: 100vh;

}

.col {
   background-color: lightgreen;
   flex: 1 1 0px;

}

.lightpink {
   background-color: lightpink;
   border: 1px solid;
   flex:1;

}

.container > div {
   width: 50%;
   display:flex;
   flex-direction:column;
}

.col .container {
   display: flex;
   height: 100%;
}
<div class="container">
    <div class="col">
      one
    </div>
    <div class="col">
      two
    </div>
    <div class="col">
      <div>1</div>
      <div>2</div>
      <div class="container">
          <div >
            <div class="lightpink">col 1</div>
            <div class="lightpink">col 2</div>
          </div>
          <div>
            <div class="lightpink">col 3</div>
          </div>
      </div>
    </div>
  </div>

Upvotes: 1

Mr T
Mr T

Reputation: 864

Use css grid on parent element:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container {
  border: 1px solid;
}

.child {
  border: 1px solid red;
  margin: 5px;
  min-height: 200px;
  width: calc(100% - 10px);
}
<div class="parent">
  <div class="container">

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

  </div>
  <div class="container">
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
  </div>
</div>

By default css grid property grid-auto-rows has a value of auto, which makes all your columns of equal height.

Solution using css flex:

.parent {
  display: flex;
}

.container {
  flex: 1 0 calc(100% / 3);
  border: 1px solid;
}

.child {
  border: 1px solid red;
  margin: 5px;
  min-height: 200px;
  width: calc(100% - 10px);
}
<div class="parent">
  <div class="container">

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

  </div>
  <div class="container">
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
    <div class="child">

    </div>
  </div>
</div>

Upvotes: 0

Related Questions