code

 #ds-smilies-tooltip { max-width: 400px; min-width: 200px; width: -webkit-calc(100% - 130px);  /*  WebKit 536.3 (Chrome 19) and above, experimental */ width:         calc(100% - 130px);  /*  final CSS3 compliant implementation; Firefox 16 and IE 9, and above */ }

It is OK to add this section to the original css

introduce

Quite simply, calc is the abbreviation of Calculate, so it calculates the value of the expression in parentheses through "+, -, *,/" operations, and takes the value as the final result.

But pay attention to the following points:

  1. When there is "+" and "-" in the expression, there must be spaces before and after it. For example, "widht: calc (12%+5em)", which is written without spaces, is wrong;
  2. It is better to add identifiers of different browsers to make them compatible

calc(100% - 130px); The width of the screen - 130px (The maximum value shall not exceed 400px, and the minimum value shall not be less than 200px)

But because The width of a screen is fixed , so the cascading reply emoticon box will still exceed the boundary==I don't know how to deal with it?

I read the code hran Thank you!

Reference Documents

[[1] cal help document]（ https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc )

Last modification: March 23, 2019
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.