2

I'm using flexbox to create a two-columns layout with a header row.

* {
  box-sizing: border-box;
  position: relative;
}

.container {
  border: 2px solid gray;
  display: flex;
  flex-wrap: wrap;
  height: 300px;
}

.header {
  flex-basis: 100%;
  border: 2px solid magenta;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.column1 {
  flex-basis: 150px;
  /* height: calc(100% - 50px); */
  border: 2px solid green;
}

.column2 {
  /* height: calc(100% - 70px); */
  flex: 1;
  border: 2px solid orange;
}
<div class='container'>
  <div class='header'>it's a header</div>
  <div class='column1'>column 1</div>
  <div class='column2'>column 2</div>
</div>

Feel free to see the full example here.

As you can see in the example there is a gap between columns and header. My aim is to stretch columns vertically to fill whole empty space in the container. I can achieve it by setting height property like calc(100% - <header-height>). Is it the correct way?

I just tried to use "flex" style and set align-items: stretch to the container and align-self: stretch to columns but without success. Did I probably miss something trying to implement it this way?

VXp
  • 11,598
  • 6
  • 31
  • 46
user1820686
  • 2,008
  • 5
  • 25
  • 44
  • 1
    Why don't you just use grid instead of flexbox? – elena Jun 14 '18 at 06:26
  • Since flexbox is a 1-dim. system, it is, there's nothing you can do about it. You can only optimize it with the use of CSS variables so that you don't have to change the height more than once. – VXp Jun 14 '18 at 06:45
  • @elena it's just a try to understand how flexbox does work :) Anyway, thanks for explanation in your answer – user1820686 Jun 14 '18 at 07:36
  • related: https://stackoverflow.com/questions/36167253/ – myf Jun 14 '18 at 09:23

2 Answers2

3

I think specifying flex-direction as column is appropriate in this case. The second row is itself a flex element with the flex-direction: row. You can fill the rest of the remaining space using flex: 1, which is equivalent to flex-grow: 1. 

* {
  box-sizing: border-box;
}

.container {
  border: 2px solid gray;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
}

.header {
  border: 2px solid magenta;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.subcontainer {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.column1 {
  flex-basis: 150px;
  border: 2px solid green;
}

.column2 {
  flex: 1;
  border: 2px solid orange;
}
<div class='container'>
  <div class='header'>it's a header</div>
  <div class="subcontainer">
    <div class='column1'>column 1</div>
    <div class='column2'>column 2</div>
  </div>
</div>
elena
  • 3,740
  • 5
  • 27
  • 38
2

Do it like shown below

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

.container {
  border: 2px solid gray;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  width: 100%;
  border: 2px solid magenta;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.body-container {
  display: flex;
  width: 100%;
  flex: 1;
}

.column1 {
  width: 50%;
  border: 2px solid green;
}

.column2 {
  width: 50%;
  border: 2px solid orange;
}
<div class='container'>
  <div class='header'>it's a header</div>
  <div class="body-container">
    <div class='column1'>column 1</div>
    <div class='column2'>column 2</div>
  </div>

</div>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35