1
Iは、いくつかのクエリ上記のスニペットにおいてCSSのオーバーフロープロパティは実際にどのように機能しますか？
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
}
.inner-div {
\t border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">HelloWorld</div>
</div>
</body>、このコードスニペット以下CSS- チェックでプロパティをオーバーフローに関連した、内側のdivコンテナがで溢れていますx方向であり、y方向ではない。しかし、overflow: scrollを追加すると、スクロールバーが両方向に追加されますが（ここまで）、内側のdivコンテナにもかかわらず、x方向ではなくy方向のスクロールバーを使用できますx方向にオーバーフローしている。それはなぜそうですか？ チェックこのスニペット、
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
overflow: scroll;
}
.inner-div {
\t border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">HelloWorld</div>
</div>
</body>
</html>私の最後のクエリは、私はハイフンでテキスト区切る場合、である（ - ）またはスペース、を、それが2行に分割していない理由同じ行で続行しますか？私は外側のコンテナのサイズのためかもしれませんが、スペースを使わずにテキストを入力すると分割されないのはなぜですか？？ チェック以下、
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
}
.inner-div {
\t border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">Hello World</div>
</div>
</body>
</html>おかげであなたの時間を与えるために、あなたの助けのためにたくさん！
ポジションアブソリュートは、アンカー方向（あなたの場合は「右」）のコンテナのサイズを考慮しません。 – Yashas