Div dimensions change on window resize-CodePudding

I've a container div in flex that contains a coloured rectangle on the left and some text on the right. The red rectangle has fixed width and height.

When the user resize the window, the size of the rectangle become smaller. Why? It is set as 50px.

What am I missing? What is the right way to have always the rectangle with the same dimensions?

.container {
  border: 1px solid black;
  display: flex;
  align-items: center;
}

.symbol {
  width: 50px;
  height: 30px;
  background-color: tomato;
  margin-right: 10px;
}

<div >
  <div ></div>
  <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit iaculis risus ut porta</div>
</div>

CodePudding user response：

.container {
  border: 1px solid black;
  display: flex;
  align-items: center;
}

.symbol {
  width: 50px;
  height: 30px;
  background-color: tomato;
  margin-right: 10px;
  flex-shrink: 0; /* this tells the flex item that you don't want it to shrink */
}

<div >
  <div ></div>
  <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit iaculis risus ut porta</div>
</div>