divボーダーの一部が切り取られている

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、スクリーンショットを提供していただけますか？再現できないか、投稿から問題を完全に理解できていません。

— Gleb Kost

画像を追加しました。私が抱えている問題は、コンテナー要素が外側の境界線と干渉していることです。何を入れたかに関係なく、一貫してしっかりしたレンダリングにしたいのですが。

— 困惑

2

サンドボックス内のコードはここに投稿したものとは異なり、どちらのバージョンも画像の動作を示しません（ウィンドウのサイズを変更するChromeとFirefoxの両方をチェックした）。

— NevNein

4

再現できません。どのOSとブラウザを使用していますか？

— BDawg

2

サンドボックスで確認できるように、StyledTextBoxコンポーネントはUserInputコンポーネントのみを保持しています。また、UserInputコンポーネントに色を付けて表示すると、何も途切れていないように見え、すべてが正常に機能しています。

— LeonVuković

5

他のコメンターと同様に、私はあなたが報告しているエラーをかなり理解できますが、それはbox-sizing問題のように思えました。レンダリングされたDOMをhttps://k7ywy.codesandbox.io/で確認box-sizing:border-boxすると、ラッパー要素または内部要素に適用されていないことがわかりますが、質問に貼り付けたスニペットで修正されています。

質問することにいくつか気づきました。

box-sizingすべてに適用しないのはなぜですか？通常、width:100%;andおよび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;
}

— ジョージを支持
ソース