Как предотвратить отображение: flex-элемент очищает предыдущий float?

Question

Похоже на дисплей: flex-элемент автоматически очищает предыдущий float.

Как предотвратить его очистку? (Мне нужно, чтобы предыдущий контент перекрывал гибкий контейнер).

Например:

.floater{
  float:right;
  width: 200px;
  border:1px solid red;
}
.row{
  display:flex;
  border:1px solid green;
  padding:12px;
  width:100%;
  clear:none;
}
.col-400{
  flex-basis:400px;
  border:1px solid blue;
  padding:12px;
}
.col-grow{
  flex-grow:1;
  border:1px solid teal;
  padding:12px;
}

<div class='outer'>
  Intro content
  <div class='floater'>
    Please float to right. And don't clear.
    Please float to right. And don't clear.
    Please float to right. And don't clear.
  </div>
  <div class='row'>
    <div class='col-400'>
      Left col
      Left col
      Left col
      Left col
      Left col
    </div>
    <div class='col-grow'>
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
      Main col
    </div>
  </div>
</div>

Выглядит так:

Я хочу, чтобы красный перекрывался на зеленом.

Answer 1

Использование position: absolute;

.floater{
    position: absolute;
    float:right;
    width: 200px;
    border:1px solid red;
}

Answer 2

Это не проблема с flex, это связано с тем, что отступ гибкого элемента увеличивает ширину элемента за пределы 100%. Это связано с тем, что вы не указали размер поля для html add box-sizing: border-box;, поэтому заполнение будет таким же, как и ожидалось.

* {
    box-sizing: border-box;
}

.floater {
    float: right;
    width: 200px;
    border: 1px solid red;
}

.row {
    display: flex;
    border: 1px solid green;
    padding: 12px;
    width: 100%;
    clear: none;
}

.col-400 {
    flex-basis: 400px;
    border: 1px solid blue;
    padding: 12px;
}

.col-grow {
    flex-grow: 1;
    border: 1px solid teal;
    padding: 12px;
}

<div class='outer'>
    Intro content
    <div class='floater'>
        Please float to right. And don't clear. Please float to right. And don't clear. Please float to right. And don't clear.
    </div>
    <div class='row'>
        <div class='col-400'>
            Left col Left col Left col Left col Left col
        </div>
        <div class='col-grow'>
            Main col Main col Main col Main col Main col Main col Main col Main col Main col Main col
        </div>
    </div>
</div>