Элемент Flexbox не выравнивается по концу

Question

Попытка заставить этот кодовый инструмент работать с / 1001 * div (темно-красным), прячущимся под голубым светом .top-right div.

https://codepen.io/Troop4Christ/pen/oPwqGV

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.lightbrown {
  background: lightbrown;
}

.orange {
  background: orange;
}

.outer-wrp {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.outer-wrp .left-side {
  height: 100%;
  width: 500px;
  display: inline-block;
}
.outer-wrp .top-right {
  width: calc(100vw - 500px);
  vertical-align: top;
  display: inline-block;
  height: 90px;
}
.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  display: block;
  height: calc(100% - 90px);
  float: right;
}
.outer-wrp .inner-wrp .inner-left {
  display: inline-block;
  width: calc(100% - 200px);
  height: 100%;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
    </div>
  </div>
</div>

У меня align-self: flex-end на .inner-wrp, но он все еще идет под зеленым .left-side div.

Как мне заставить его переместиться вправо под голубым div?

Answer 1

Вы смешиваете множество свойств (flex, inline-block, float, вертикальное выравнивание и т. Д.), Которые бесполезны, поскольку вам нужно только полагаться на свойства flexbox. Вы также используете vw единицу, которая не подходит, так как содержит ширину полосы прокрутки и может привести к нежелательному поведению при наличии прокрутки (используйте 100% вместо этого). Тогда то, что вы хотите, может быть сделано с направлением столбца, а не с направлением строки:

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.lightbrown {
  background: lightbrown;
}

.orange {
  background: orange;
}

.outer-wrp {
  height: 100vh;
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;
}

.outer-wrp .left-side {
  height: 100%;
  width: 500px;
}

.outer-wrp .top-right {
  width: calc(100% - 500px);
  height: 90px;
}

.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  height: calc(100% - 90px);
  display:flex;
}

.outer-wrp .inner-wrp .inner-right {
  width: 200px;
}
.outer-wrp .inner-wrp .inner-left {
  width: calc(100% - 200px);
}

body {
 margin:0;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
  </div>
</div>

Answer 2

Если я правильно понимаю ваш желаемый результат, вы захотите создать контейнер <div> для красного и синего контейнеров и дать ему следующее:

display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: 100%;
width: 50%;

Это можно увидеть здесь .

И скомпилировано в следующем:

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.brown {
  background: brown;
}

.orange {
  background: orange;
}

.outer-wrp {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.outer-wrp .left-side {
  height: 100%;
  width: 500px;
  display: inline-block;
}

.outer-wrp .top-right {
  width: calc(100vw - 500px);
  vertical-align: top;
  display: inline-block;
  height: 90px;
}

.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  display: block;
  height: calc(100% - 90px);
  float: right;
}

.outer-wrp .inner-wrp .inner-left {
  display: inline-block;
  width: calc(100% - 200px);
  height: 100%;
}

.blue-red {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 100%;
  width: 50%;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
  </div>
</div>

Возможно, вам придется обновить .outer-wrp .inner-wrp до calc(100vw - 500px) или немного поиграть отсюда, чтобы удовлетворить ваши потребности.