CODEWITHSUNDEEP
cssoverflow
Frosted Cupcake
Frosted Cupcake

Reputation: 1970

How overflow property in CSS actually works?

I have few queries related to overflow property in CSS- Check this below code snippet,

.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 {
	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>

In the above snippet, the inner-div container is overflowing in the x-direction and not in y-direction. But if I add overflow: scroll, then it adds a scroll bar in both directions(fine till here), but I am able to use the scroll bar of y-direction and not x-direction, despite the fact that the inner-div container is overflowing in the x-direction. Why is it so? Check this snippet,

.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 {
	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>

My last query is, if I separate the text with a hyphen(-) or a space, why it breaks into 2 lines and not continue in the same line? I know it may be because of the size of my outer container but why not it splits when I enter text without spaces? Check below,

.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 {
	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>

Thanks a lot for giving your time and for your help!

Upvotes: 1

Views: 103

Answers (2)

Yashas
Yashas

Reputation: 1234

The inner-div class gives the position: absolute property to the div. This makes the inner div independent of parent div's size and will always keep overflowing out until you explicitly specify the height and width of the parent container and also stop anchoring the inner-div (using right, top, left and bottom). By not anchoring the inner-div, the purposes of absolutely positioned elements is sort of defeated. You can get back the horizontal scroll bar by removing right but you probably don't want that to happen.

In a nutshell, absolutely positioned elements are not a part of the flow and are living in another dimension (they aren't visible for the parent div).

That's how word wrapping works. If the words of a line don't fit into the width, the words are shifted to the next line after it encounters a white-space. If you don't want the words to warp after a space, you should either use non-breaking spaces (Ex:&nbsp;) or use white-space: nowrap;.

Upvotes: 1

ImprobabilityCast
ImprobabilityCast

Reputation: 464

The div has no horizontal scroll bars because it is absolutely positioned. Set your .inner-div's position property to something other than absolute orfixed, and your div will have the desired scrolling function.

As for the line splitting, that is because of automatic word wrapping that breaks the line at the end of a word or hyphen.

Upvotes: 0

Related Questions