CODEWITHSUNDEEP
cssflexbox
Dezque
Dezque

Reputation: 53

flexbox makes content disappear

I'm playing around with flexbox to get the hang of it but I am running into some issues. My goal is to have the window separated by four background colors where the first is just a header row and then the rest of the page is filled by 3 columns each a different background color. But for some reason if I write display: flex it doesn't show anything. Can someone explain to me how to get this desired effect? 

   .container {
  width: 100%;
  height: 100%;
}

.header {
  height: 150px;
  background-color: red;
}
.col-container {
  widows: auto;
  height: auto;
  display: flex;
  flex-direction: row;
}
.col {
  flex: 1;
}
.col-container:nth-child(1) {
  background: green;
}
.col-container:nth-child(2) {
  background: blue;
}
.col-container:nth-child(3) {
  background: yellow;
}
<body>
  <div class="container">
    <div class="header"></div>
    <div class="col-container">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</body>

Upvotes: 0

Views: 3293

Answers (1)

disinfor
disinfor

Reputation: 11533

Here is a working example:

.container {
  width: 100%;
  height: 100%;
}

.header {
  height: 150px;
  background-color: red;
}

.col-container {
  widows: auto;
  height: auto;
  display: flex;
  flex-direction: row;
}

.col-1 {
  flex: 1 1 33.333%;
  background-color: green;
}

.col-2 {
  flex: 1 1 33.333%;
  background-color: blue;
}

.col-3 {
  flex: 1 1 33.333%;
  background-color: yellow;
}
<body>
  <div class="container">
    <div class="header"></div>
    <div class="col-container">
      <div class="col-1">ts</div>
      <div class="col-2">dtd</div>
      <div class="col-3">dt</div>
    </div>
  </div>
</body>

Here's what you needed to fix:

  1. Set flex-direction to row. You most likely want the columns next to each other.
  2. Add the classes to your HTML for the col-1, col-2 and col-3.
  3. You need content in those col classes, or you won't see anything anyway.

I set a flex-basis (the third parameter in the flex shorthand) to 33.333%. You don't necessarily need this, but it's nice to see how much space a particular element will fill or change it.

EDIT For the comments:

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.header {
  height: 150px;
  background-color: red;
}

.col-container {
  widows: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 150px);
}

.col-1 {
  flex: 1 1 33.333%;
  background-color: green;
}

.col-2 {
  flex: 1 1 33.3333%;
  background-color: blue;
}

.col-3 {
  flex: 1 1 33.3333%;
  background-color: yellow;
}
<body>
  <div class="container">
    <div class="header"></div>
    <div class="col-container">
      <div class="col-1"></div>
      <div class="col-2"></div>
      <div class="col-3"></div>
    </div>
  </div>
</body>

Basically, you need to give the col-container a height. To achieve this, I used vh units in the calc statement. It subtracts your header height from the viewport height and gives the remainder. This also removes the necessity for filler content.

Upvotes: 1

Related Questions