Content going outside the border and code pen not working

[Growly]

In code pen, the height and font size are not changing.

Both have the same code.

This is what I see in VScode. Can give any methods on how to stop the content from escaping.

[PaulOB]

You’ve missed the units (px) from some of your measurements (again). That means they will be treated as zero when a proper (standards) doctype is present.

You set the element to 200px but width a font-size of 100px that will likely be wider than 200px so you would need to break the unbroken text ( word-break:break-all;).

.FlexBox-Item {
  /* item properties are meant to control the layout of the items like width and height or positioning.*/

  width: 200px;
  margin: 10px;
  border: 3px solid black;
  background-color: grey;
  word-break:break-all;
}

Fill in all the other missing units also. (font-size:100 or min-height:100 will mean zero or be ignored altogether.)