Parece una pantalla: el elemento flexible borra automáticamente el flotador anterior.

¿Cómo evitar que se despeje? (Necesito el contenido anterior para superponer el contenedor flexible).

Por ejemplo:

.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>

Se ve como esto: ingrese la descripción de la imagen aquí

Quiero que la roja se superponga en verde.

0
Teddy 5 ene. 2020 a las 16:27

3 respuestas

La mejor respuesta

Utilice position: absolute;

.floater{
    position: absolute;
    float:right;
    width: 200px;
    border:1px solid red;
}
1
Nitheesh 5 ene. 2020 a las 13:52

Intentó mostrar: código de cuadrícula en línea. Puedes organizar uno al lado del otro.

-3
loungexl 5 ene. 2020 a las 13:41

Esto no es un problema con flex, esto se debe a que el relleno del elemento flexible aumenta el ancho del elemento fuera del 100%. Esto se debe a que no ha proporcionado el tamaño del cuadro al html add box-sizing: border-box;, esto hará que el relleno espere lo mismo que lo esperado.

* {
    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>
0
Nitheesh 5 ene. 2020 a las 13:41