Частини меж Діва відрізаються

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

— Плетеність
джерело

4

Привіт Perplexityy, будь ласка, ви можете надати скріншот? Я, здається, не в змозі відтворити або я не повністю розумію проблему з поста.

— Гліб Кост

Я додав зображення. Проблема, яку я маю, полягає в тому, що елементи контейнерів перешкоджають зовнішній межі. Я хотів би, щоб це було суцільно рендеринг незалежно від того, що я вкладаю в нього.

— Perplexityy

2

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

— NevNein

4

Я не можу відтворити. Яку ОС та браузер ви використовуєте?

— BCDeWitt

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

Це виправляє це для вас? Приклад пісочниці . Наданий вихід .

— Джейсон Лідон
джерело

На екрані екрана права межа помітно тонша, ніж скажімо, нижня межа.

— Perplexityy

Я залишаю і вітаю вашу посаду, сподіваюся, ви отримаєте щедрості принаймні половину її.

— AmerllicA

0

Просто застосуйте жодне або прозоре тло до поля введення, і це вирішить проблему з кордоном

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

— К.К.Гупта
джерело

0

Це проблема розміру коробки. Ви можете прочитати більше тут . Я також рекомендую не використовувати display: flex. Можливо, спробуйте змінити колір фону на прозорий? Сподіваюся, це допомагає!

0

Приємний простий спосіб - дати box-sizing: border-boxбатьківському елементу. Щоб бути безпечним, ви можете зробити це на рівні кореневих компонентів:

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

— Фаворит Джордж
джерело