html - 是否可以在不丢失响应能力的情况下以像素为单位设置一个部分的宽度，以百分比为单位设置剩余部分的宽度？

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>

在上面的代码中，我尝试创建一个菜单部分和内容部分。 菜单部分的特点是即使调整窗口大小，它的宽度也保持不变。但是内容部分需要根据窗口调整大小。但是这里上面给出的设计不是响应式设计。是否可以设计这样的菜单和内容部分而不损失其响应性？

Answer 1

从 article 中删除 width 和 float 属性并添加 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>