CSS: width/height attribute respond only to px (not %)

Question

I want to create a red square on in the webpage.

When I write the following html element:

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10%**','height' : '**10%**'}"

I get a white webpage.

However, when I replace '%' with 'px' and write:

<div style="{'background': 'red', 'table-layout': 'fixed', 'width': '**10px**','height' : '**10px**'}"

I get a small red square at the corner of the screen. Probably, I use the percent feature wrong. Can you tell me what is the problem?

Answer 1

<div class="parent" style="width: 100%; height: 500px">
  <div style="width: 10%; height: 10%; background: red"></div>
 </div>

i think you need to have a parent which your percentage width and height would base.