1

I'm trying to divide a page in two rows where the first row takes 2/3 of the page height and the second the remaining 1/3 (without scrollbars because of overflow) using flexbox.

The first row can be empty for all I care but I want the bottom one to have an image (or more). I'm able to create the layout I want but as soon as I add the image, the image ignores its parent height and even overflows it, breaking the layout completely.

I worked with this solution to no avail, which is exactly what I want but with flex-direction set to column instead of row.

Here's what I have so far:

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-flow: column;
}

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

img {
  height: 100%;
  width: auto;
}
<body style="background: blue;">
  <div class="d-flex flex-col" style="background: yellow; flex-grow: 1">
    <div style="flex-grow: 2;">
      <p>Some text, should take 2/3 of the layout</p>
    </div>
    <div style="flex: 1; background: red;">
      <img src="https://i.imgur.com/llyPMGV.jpg" />
    </div>
  </div>
</body>

JSFiddle: https://jsfiddle.net/7dtzakhb/

FlawTECH
  • 61
  • 8

0 Answers0