Is it possible to set width of one part in pixel and width of remaining part in percentage without lost it's responsiveness?

Question

aside {
    background-color: blue;
    width: 220;
    list-style: none;
    height: 100%;
    float:left;
}

article {
    background-color: red;
    width:60%;
    height:100%;
    float: left;
}

        <aside>
            <ul>
                <li><a>1st item</a></li>
                <li><a>2nd item</a></li>
                <li><a>3rd item</a></li>
                <li><a>4th item</a></li>
            </ul>
        </aside>
            
        <article>
          <p>contents here</p>
        </article>

In the above code i'm tried to create a menu part and content part.the speciality of the menu part is it's width remain same even if window is resized. But the content part need to be resized according to window resizing.but here the design given above is not a responsive design.is it possible to design such a menu and content part without lost it's responsiveness?

Answer 1

Remove width and float properties from article and add overflow: hidden

aside {
  background-color: blue;
  width: 150px;
  float:left;
}

aside ul {
  list-style: none;
}

article {
  background-color: red;
  overflow: hidden;
}

<aside>
  <ul>
    <li><a>1st item</a></li>
    <li><a>2nd item</a></li>
    <li><a>3rd item</a></li>
    <li><a>4th item</a></li>
  </ul>
</aside>
            
<article>
  <p>contents here</p>
</article>