Bagian perbatasan div terputus

9

Saya memiliki elemen kontainer yang memegang beberapa elemen lain, tetapi tergantung pada ukuran layar bagian dari mereka terputus di berbagai bagian. Anda dapat mengamati perilaku pada tautan sandbox kode saya, ketika halaman HTML disesuaikan lebarnya (dengan mengklik dan menariknya). Bagaimana saya bisa memastikan bahwa hanya batas kontainer utama yang diberikan, dan bahwa elemen anak tidak memiliki dampak apa pun?

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

— Kesal
sumber

4

Hai Perplexityy, bisakah Anda memberikan tangkapan layar? Sepertinya saya tidak dapat mereproduksi atau saya tidak sepenuhnya memahami masalah dari pos.

— Gleb Kost

Saya menambahkan gambar. Masalah yang saya alami adalah bahwa elemen kontainer mengganggu perbatasan luar. Saya ingin menjadi render yang konsisten terlepas dari apa yang saya masukkan.

— Perplexityy

2

Kode di kotak pasir berbeda dari yang Anda posting di sini, dan tidak ada versi yang menunjukkan perilaku dalam gambar (memeriksa baik Chrome dan Firefox mengubah ukuran jendela).

— NevNein

4

Saya tidak bisa mereproduksi. OS dan browser apa yang Anda gunakan?

— BDawg

2

Komponen StyledTextBox Anda hanya memegang komponen UserInput seperti yang saya lihat di kotak pasir. Juga, jika Anda mewarnai komponen UserInput sehingga Anda dapat melihatnya, sepertinya tidak ada yang terputus, semuanya berfungsi dengan baik.

— Leon Vuković

5

Seperti para komentator lainnya, saya bisa melihat kesalahan yang Anda laporkan, tetapi menurut saya itu seperti box-sizingmasalah. Saat meninjau DOM yang diberikan melalui https://k7ywy.codesandbox.io/ kita dapat melihat box-sizing:border-boxtidak sedang diterapkan ke elemen pembungkus atau elemen internal, tetapi diperbaiki dalam cuplikan yang Anda tempelkan dalam pertanyaan.

Saya perhatikan beberapa hal yang akan saya pertanyakan.

Mengapa tidak berlaku box-sizinguntuk semuanya? Biasanya ketika berhadapan dengan width:100%;dan padding/ border/ margin, itu membuat hidup jadi lebih mudah!
Dalam contoh saya, saya menghapusnya dari JS dan menerapkannya menggunakan file CSS.
Mengapa Anda menggunakan display:flexdi banyak tempat tetapi tidak mengasumsikan properti terkait flex lainnya?
Coba hapus itu dari const InputBox = styled.spandanconst StyledKeyboard = styled.span

Apakah itu memperbaikinya untuk Anda? Contoh kotak pasir . Output yang diberikan .

— Jason Lydon
sumber

Di tangkapan layar Anda, batas kanan terasa lebih tipis daripada batas bawah.

— Perplexityy

Saya meninggalkan dan mendukung posting Anda, saya harap Anda akan mendapatkan hadiah setidaknya setengah dari itu.

— AmerllicA

0

Hanya menerapkan latar belakang tidak ada atau transparan untuk bidang input dan ini akan menyelesaikan masalah perbatasan

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

— KKGupta
sumber

0

Ini masalah ukuran kotak. Anda dapat membaca lebih lanjut di sini . Saya juga menyarankan Anda tidak menggunakan display: flex. Mungkin mencoba mengubah warna latar belakang menjadi transparan? Semoga ini membantu!

0

Cara mudah yang bagus adalah memberi box-sizing: border-boxke elemen induk. Agar aman, Anda dapat melakukan ini di tingkat komponen root:

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

— Mendukung George
sumber