three div with one right side with full height and rest up and down in flexbox

Question

Does is possible to make three div with one right side and rest up and down in flexbox without changing divs? Expecting result like

Desktop view:

Mobile view:

Current work https://codepen.io/anon/pen/jwweqr

.my-wrap {
  width: 90%;
  margin: 50px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #eee;
  color: #fff;
}
.my-wrap p {
  margin: 10px;
}

.wrap-one, .wrap-two {
  width: 75%;
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
}

<div class="my-wrap">
  <div class="wrap-one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <div class="wrap-two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <div class="wrap-three">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

My first thought is to nest flex containers. Outer `.my-wrap` is a flex container with 2 sections inside, one for the two stacked bars, the second for the far right bar. Then make the wrapper around the stacked bars a flex container as well and give them a 100% flex-basis or min-width and set them to wrap. I'm working it out now and will follow up. — bobbyz, Jun 22 '17 at 14:22
making another div is may not work because it will break responsive design — Mo., Jun 22 '17 at 14:23
How would you like it to look on smaller screens? 3 vertically-stacked bars? — bobbyz, Jun 22 '17 at 14:28

three div with one right side with full height and rest up and down in flexbox

0 Answers0