Используя только css:flex;

Question

Подскажите пожалуйста. Есть следующая структура, один родитель и 3 дочерних блока.

<div>
   <div></div>
   <div></div>
   <div></div>
</div>

Возможно первый дочерний блок(красный), разместить так чтобы он занимал 2 строчки. Второй(оранжевый) был сверху по правую сторону от красного и занимал все свободное пространство. То есть прижимал зеленый блок к низу.

Только flex, без grid. Ширина и высота красного известна, не желательно конечно чтобы красный блок растягивался под высоту правых двух блоков. Ну что поделать если никак по другом...

.listtr {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-between;
    gap: 10px;
    height: 100px;
    padding: 10px;
  }
  
.listtr > * {
    &.img {
        width: 11%;
        min-width: 80px;
        max-width: 120px;
    }
    &.title {
        width: calc(100% - 10px);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    &.st {
        color: #6a6a6a;
        font-size: 13px;
    }
}

Answer 1

Можно

body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

body>div {
  width: calc(50% - 1vmin);
  &#n1 {
    height: 95%;
    background-color: red;
  }
  &#n2 {
    height: 60%;
    background-color: orange;
  }
  &#n3 {
    height: 38%;
    background-color: blue;
  }
}


/* For demo */

body {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 1vmin;
  gap: 1vmin;
}

<body>
  <div id="n1"></div>
  <div id="n2"></div>
  <div id="n3"></div>
</body>

БЛОГ НА HUSL

Используя только css:flex;

Ответы (1 шт):

Можно