Div not taking height mentioned in the css

I am new to HTML and CSS and I was practicing flexbox layout to center multiple divs. but I think there's something wrong here.

Here the second div inside the contains class is not taking any height or width and background color. But when I apply these same properties via inspect tool. It works as expected.

I was expecting that both the divs should have height and width of 50px and background color red.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.contains {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div1 {
  height: 50px;
  width: 50px;
  background-color: red;
}

<!-- language: lang-html -->

<div class="contains">
  <div class="div1">1</div>
  <div clsss="div1">2</div>
</div>

<!-- end snippet -->

There is typo in your html: you wrote clsss instead of class for the second div.

Fixing this typo gives the intended result:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.contains{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.div1{
    height: 50px;
    width: 50px;
    background-color: red;
}

<!-- language: lang-html -->

<div class="contains">
    <div class="div1">1</div>
    <div class="div1">2</div>
</div>

<!-- end snippet -->