Content going outside the border and code pen not working

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.

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;

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.