Части границы раздела обрезаются

9

У меня есть элемент контейнера, который содержит несколько других элементов, но в зависимости от размера экрана их части необъяснимым образом обрезаются на разные части. Вы можете наблюдать за поведением по моей ссылке в песочнице кода, когда HTML-страница настраивается по ширине (нажав и перетащив ее). Как я могу убедиться, что отображается только граница основного контейнера и что дочерние элементы не оказывают никакого влияния?

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

— Perplexityy
источник

4

Привет Perplexityy, вы можете предоставить скриншот, пожалуйста? Кажется, я не могу воспроизвести или я не до конца понимаю проблему из поста.

— Глеб Кост

Я добавил изображение. У меня проблема в том, что элементы контейнера мешают внешней границе. Я хотел бы, чтобы это был неизменно твердый рендер, независимо от того, что я в него вложил.

— недоумение

2

Код в песочнице отличается от того, который вы опубликовали здесь, и ни одна из версий не демонстрирует поведение на изображении (проверено, что Chrome и Firefox изменяли размер окна).

— NevNein

4

Я не могу воспроизвести. Какую ОС и браузер вы используете?

— BDawg

2

Ваш компонент StyledTextBox содержит только компонент UserInput, как я вижу в песочнице. Кроме того, если вы раскрасили компонент UserInput, чтобы вы могли его видеть, кажется, что ничего не обрезано, все работает нормально.

— Леон Вукович

5

Как и другие комментаторы, я вполне могу разобрать ошибку, о которой вы сообщаете, но она показалась мне box-sizingпроблемой. При просмотре визуализированного DOM через https://k7ywy.codesandbox.io/ мы видим, что box-sizing:border-boxон не применяется к элементу-обертке или внутренним элементам, но исправлен в фрагменте, который вы вставили в вопрос.

Я заметил несколько вещей, которые я бы спросил.

Почему бы не относиться box-sizingко всему? Обычно, когда имеешь дело с width:100%;и padding/ border/ margin, это делает жизнь намного проще!
В моем примере я удалил его из JS и применил его, используя файл CSS.
Почему вы используете display:flexв нескольких местах, но не даете никаких других связанных с флексом свойств?
Попробуйте удалить это из const InputBox = styled.spanиconst StyledKeyboard = styled.span

Это исправит это для вас? Пример песочницы . Предоставленный вывод .

— Джейсон Лидон
источник

На скриншоте правая граница заметно тоньше, чем, скажем, нижняя граница.

— недоумение

Я уезжаю и голосую за ваш пост, надеюсь, вы получите награду как минимум половину.

— AmerllicA

0

Просто примените фоновый или прозрачный к полю ввода, и это решит проблему границы

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

— KKGupta
источник

0

Это проблема размера коробки. Вы можете прочитать больше здесь . Я также рекомендую вам не использовать display: flex. Может быть, попробовать изменить цвет фона на прозрачный? Надеюсь это поможет!

0

Хороший простой способ - передать box-sizing: border-boxродительский элемент. Чтобы быть в безопасности, вы можете сделать это на уровне корневого компонента:

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

— Фавор Джордж
источник