1

Eu tenho duas div lineadas horizontalmente usando display:flex. Ao aplicar uma largura de 250px em uma e 100% na outra a de 250px perde o tamanho de 250px ficando sempre com alguns pixels a menos.

Se eu mudo para 300px, 100px, 550px, não importa, ela sempre fica faltando alguns pixels de diferença do tamanho indicado e a quantidade de pixel faltando sempre varia, não é uma quantidade fixa.

Ja tirei a margin, padding, top tudo e apliquei o box-border também e continua igual.

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
        }

        .div1 {
            background-color: blueviolet;
            width: 250px;
            height: 100px;
        }

        .div2 {
            background-color: rgb(0, 166, 231);
            width: 100%;
            height: 100px;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

</html>

2 Respostas 2

0

Isso é uma característica do display:flex, um container flex tenta "equalizar" a largura dos elementos filhos para que todos caibam na mesma linha.

Tem duas forma de vc corrigir isso, uma é usando calc() na div que está com 100% de width, tipo calc(100% - 250px), e a outra é: trocando de width para min-width na div roxa, tipo min-width: 250px

Com min-width

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    display: flex;
  }

  .div1 {
    background-color: blueviolet;
    height: 100px;
    
    min-width: 250px;
  }

  .div2 {
    background-color: rgb(0, 166, 231);
    width: 100%;
    height: 100px;
  }
</style>
</head>

<body>
  <div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
  </div>
</body>

</html>


Com calc(100% - 250px)

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    display: flex;
  }

  .div1 {
    background-color: blueviolet;
    width: 250px;
    height: 100px;
  }

  .div2 {
    background-color: rgb(0, 166, 231);
    width: calc(100% - 250px);
    height: 100px;
  }
</style>
</head>

<body>
  <div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
  </div>
</body>

</html>

3
  • 1
    Muito obrigado pela a resposta, imaginei que uma solução seria essa do calc() mas queria saber exatamente o que está acontecendo pra acontecer esse problema. Obrigado pela resposta. 7/02/2021 às 13:32
  • @FernandoAmerico se a resposta resolver o problema lembre-se de marca-la como aceita, assim sua pergunta não fica em aberto sem resposta aceita. É só clicar no ícone de ✔︎ abaixo das setinhas ao lado da resposta ;)
    – hugocsl
    7/02/2021 às 14:11
  • 1
    Claro, certo, obrigado mais uma vez. 7/02/2021 às 18:29
-1

777- Deves usar a mesma medida na largura, na div1 estás usando uma medida fixa (px) e na div2 estás usando uma medida relativa(%), a div2 está descontando alguns pixels na div1 para completar os 100% de largura.

1
  • Obrigado pela a resposta, consegui resolver o problema. 7/02/2021 às 18:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .