Se cortan partes del borde div

9

Tengo un elemento contenedor que contiene algunos otros elementos, pero dependiendo del tamaño de la pantalla, partes de ellos se cortan inexplicablemente en varias partes. Puede observar el comportamiento en el enlace de mi sandbox de código, cuando la página HTML se ajusta en ancho (haciendo clic y arrastrándola). ¿Cómo puedo asegurarme de que solo se representa el borde del contenedor principal y que los elementos secundarios no tienen ningún impacto?

https://codesandbox.io/s/focused-tree-ms4f2

import React from "react";
import styled from "styled-components";

const StyledTextBox = styled.div`
  height: 15vh;
  width: 30vw;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border: 1px solid black;
  background-color: #fff;
  > * {
    box-sizing: border-box;
  }
`;

const InputBox = styled.span`
  height: 35%;
  width: 100%;
  display: flex;
  border: none;
  outline: none;
`;



const UserInput = styled.input`
  height: 100%;
  width: 90%;
  border: none;
  outline: none;
`;

const SolutionBox = styled.div`
  height: 35%;
  width: 100%;
  border: none;
  outline: none;
`;

const StyledKeyboard = styled.span`
    height: 30%;
    width: 100%;
    position: relative;
    background-color: #DCDCDC;
    box-sizing: border-box;
    display: flex;
`

export default function App() {
  return (
    <StyledTextBox>
      <InputBox>
        <UserInput />
      </InputBox>
      <SolutionBox/>
      <StyledKeyboard/>
    </StyledTextBox>
  );
}

javascript css reactjs

— Perplejidad
fuente

44

Hola Perplexityy, ¿puedes proporcionar una captura de pantalla, por favor? Parece que no puedo reproducir o no entiendo completamente el problema de la publicación.

— Gleb Kost

Agregué una imagen. El problema que tengo es que los elementos del contenedor interfieren con el borde exterior. Me gustaría que fuera un renderizado sólido, independientemente de lo que puse en él.

— Perplejo

2

El código en el sandbox es diferente del que publicó aquí, y ninguna de las versiones exhibe el comportamiento en la imagen (marcó Chrome y Firefox redimensionando la ventana).

— NevNein

44

No puedo reproducirme ¿Qué sistema operativo y navegador estás usando?

— BDawg

2

Su componente StyledTextBox solo contiene el componente UserInput como puedo ver en el sandbox. Además, si colorea el componente UserInput para que pueda verlo, parece que nada está cortado, todo está funcionando bien.

— Leon Vuković

5

Al igual que los otros comentaristas, puedo distinguir el error que está informando, pero me pareció un box-sizingproblema. Al revisar el DOM representado a través de https://k7ywy.codesandbox.io/ , podemos ver box-sizing:border-boxque no se aplica al elemento contenedor o a los elementos internos, pero se repara en el fragmento que pegó en la pregunta.

Noté algunas cosas que cuestionaría.

¿Por qué no aplicar box-sizinga todo? Por lo general, cuando se trata width:100%;y padding/ border/ margin, hace la vida mucho más fácil.
En mi ejemplo, lo eliminé del JS y lo apliqué usando el archivo CSS.
¿Por qué estás usando display:flexen varios lugares pero no estás evaluando ninguna otra propiedad relacionada con flex?
Intenta eliminar eso de const InputBox = styled.spanyconst StyledKeyboard = styled.span

¿Eso te lo arregla? Ejemplo de caja de arena . Salida renderizada .

— Jason Lydon
fuente

En su captura de pantalla, el borde derecho es notablemente más delgado que, por ejemplo, el borde inferior.

— Perplejidad

Les dejo un voto a su publicación, espero que obtengan la recompensa al menos la mitad.

— AmerllicA

0

Simplemente aplique el fondo ninguno o transparente al campo de entrada y esto resolverá el problema del borde

.muXee{
    background-color: transparent;
//OR background:none
}

— KKGupta
fuente

0

Es un problema de tamaño de caja. Puedes leer más aquí . También te recomiendo que no lo uses display: flex. ¿Quizás intente cambiar el color de fondo a transparente? ¡Espero que esto ayude!

0

Una manera fácil y agradable es dar box-sizing: border-boxal elemento padre. Para estar seguro, puede hacer esto en el nivel del componente raíz:

* {
  ...;
  box-sizing: border-box;
}

— Favorecer a George
fuente