Изменение размера элементов по обеим сторонам окна с помощью CSS с использованием inline, flex, float или любого другого

Question

Я знаю, что есть много вопросов по этому поводу, большинство из них говорит, что это невозможно, потому что они задают только один метод, этот вопрос касается любого метода, я просто не могу поверить, что это невозможно в CSS.

У меня есть 3 элемента, 2 из них сложены слева, а другой выше и его ширина заполняет оставшееся пространство. Когда экран становится меньше, они складываются, поэтому правый элемент перемещается между первым и последним элементом:

Я пробовал разные методы, такие как display:inline-block, float:left (и справа), display:flex (и некоторые свойства flex) и даже таблицы! Я не могу этого достичь.

Это мои 3 лучшие попытки:

.test_inline div{display:inline-block;}
.test_inline .right{flex-grow:1; width: calc(100% - 130px);min-width:100px;}

.test_flex{display:flex;flex-wrap: wrap}
.test_flex .right{flex-grow:1; width: calc(100% - 130px);min-width:100px;}

.test_float .left{float:left;}
.test_float .right{display: flow-root;}

/* */

.main{ margin: 50px; }
div div{ border: 1px solid #333; }
.left{ width: 100px; }
.right{ height: 50px; }

<div class='main test_inline'>
  <div class='left'>1 Top left</div>
  <div class='right'>2 Right</div>
  <div class='left'>3 Bottom Left</div>
</div>
<div class='main test_flex'>
  <div class='left'>1 Top left</div>
  <div class='right'>2 Right</div>
  <div class='left'>3 Bottom Left</div>
</div>
<div class='main test_float'>
  <div class='left'>1 Top left</div>
  <div class='right'>2 Right</div>
  <div class='left'>3 Bottom Left</div>
</div>

Спасибо за помощь!

Answer 1

Я просто не могу поверить, что это невозможно с CSS.

Это возможно. На самом деле, это довольно просто с помощью CSS Grid.

Нет необходимости использовать поплавки, встроенный блок, абсолютное позиционирование или даже прогиб.

jsFiddle demo

.test_grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 50px;
  grid-gap: 5px;
}

.right {
  grid-row: span 2;
}

@media ( max-width: 600px) {
  .test_grid {
    grid-template-columns: 1fr;
    grid-template-rows: 50px 50px 50px 50px;
  }
}

/* */

.main {
  margin: 50px;
}

div div {
  border: 1px solid #333;
}

<div class='main test_grid'>
  <div class='left'>1 Top left</div>
  <div class='right'>2 Right</div>
  <div class='left'>3 Bottom Left</div>
</div>

Answer 2

Есть несколько способов сделать это @stamin. В конечном счете, я думаю, что вам нужно знать, с какой стороны разметки вы хотите определить высоту вашего пользовательского интерфейса.

Это позиционирует правый элемент абсолютно и использует flexbox для двух левых. Вы всегда можете сделать это по-другому.

<div class="wrapper">
  <div class="item one">Top Left</div>
  <div class="item two">Right</div>
  <div class="item three">Bottom Left</div>
</div>

CSS

.wrapper {
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.item {
  border: 1px solid red;
  flex: 0 0 100%;
  height: 100px;
}

.one,
.three {
  text-align: left;
}
.two {
text-align: right;
}

@media (min-width: 768px) {
  .wrapper {
    padding-right: 50%;
  }
  .one,
  .three {
    float: left;
  }
  .two {
    align-self: stretch;
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
  }
}

А вот рабочий пример https://stackblitz.com/edit/css-reorder