Image align issue in flexbox-CodePudding

I am trying to align the two images, so that the bottom right of the first image, touches the top left of the second. I can't think of a good way to make this work info I also have to consider people have different browser sizes. Any suggestions?

.flexbox {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: #F8F5F0;
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%
}

.flexcol {
  max-width: 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

<div class="flexbox">
  <div class="flexrow">
    <div class="flexcol">
      <img src="https://i.imgur.com/9sOCPL1.jpg">
    </div>
    <div class="flexcol">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div class="flexrow">
    <div class="flexcol">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="flexcol"><img src="https://i.imgur.com/G55u0Uq.jpg">
    </div>
  </div>
</div>

CodePudding user response：

You have had a few issues here that are related to understanding how Flexbox work.

Using the align-items for vertically align the image container inside a row direction
Containing the img element to 100% of the container's size (otherwise it renders at full size, which is not what you want)
Removing unneeded display: flex from child elements. You use display: flex on the parent element, and that gives flex properties to all its direct children.

This is the shortest explanation I can give. For more details, go over the Flexbox documentation in depth.

.flexbox {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: #F8F5F0;
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%
}
.align-end {
  align-items: end;
}
.flexcol {
  max-width: 50%;
  width: 50%;
}
img {
  max-width: 100%;
}

<div class="flexbox">
  <div class="flexrow align-end">
    <div class="flexcol">
      <img src="https://i.imgur.com/9sOCPL1.jpg">
    </div>
    <div class="flexcol">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div class="flexrow">
    <div class="flexcol">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="flexcol"><img src="https://i.imgur.com/G55u0Uq.jpg">
    </div>
  </div>
</div>

CodePudding user response：

actually the bottom right of the first image, touches the top left of the second you can see this if you inspect element you just have to use a png image without background to achive this

try this exemple by changing the second image : <div ><img src="https://image.freepik.com/free-photo/relaxed-brunette-woman-dressed-pajama-covered-with-soft-warm-duvet-has-deep-sleep-bedroom-poses-bed-mobile-phone-lies-near-has-some-time-before-alarm-clock-peaceful-nap_273609-45296.jpg"> </div>