0

I have two divs in a wrapper div aligned horizontally with flex box. I would like it so the left hand side div is smaller in height and overlaps the right-hand side one. The problem is getting the first flex-item (the red box) to accept a different height in % units.

I've included the code, but also for quick reference I've included an image: fig.1 is how it is now. fig.2 is how I would like it look.

Things to note - I can't remove the wrapper div (#row-1) and I do need to do it with flex box i.e. not floats.

body {margin: 0; width: 100%; height: 100vh; display:flex; justify-content: center; align-items: center;}

/* ---- WRAPPER ---- */

#row-1 {
  display:flex;

}

/* ---- RED COLUMN ----- */

.two-col.col-1 {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 3rem 1rem;
  background: red;
  color: white;
  box-sizing: border-box;
  height: 50%;
}

/*---- LIGHT BLUE COLUMN ---- */

.two-col.col-2 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightblue;
  box-sizing: border-box;
}
<div class="row" id="row-1">
    <div class="two-col col-1">
        <h3 class="tl">A Title</h3>
        <p class="tl">Something profound about cheese</p> 
    </div>
    <div class="two-col col-2">
        <div>-- An image --</div>
    </div>
</div>

enter image description here

pjk_ok
  • 618
  • 7
  • 35
  • 90
  • possible duplicate: [Make flex items overlap](https://stackoverflow.com/q/43919067/3597276) – Michael Benjamin Mar 27 '18 at 20:32
  • @Michael_B No that question is about an overlap issue, I know how to do that. My question is about how to align two divs of two different heights horizontally, whilst they are also both centred on the cross-axis (using flex box) – pjk_ok Mar 27 '18 at 21:47
  • You need to give `#row-1` a height value for the `50%` height to work. – Nate Whittaker Mar 28 '18 at 15:47

0 Answers0