猫小白

猫小白

博客文章详情页面为左右布局,右侧边栏固定宽度,左侧文章内容自适应;使用了 Flex 布局来实现,基本样式代码如下:

.content {
    display: flex;
}
.article {
    flex: 1;
    max-width: 800px;
}
.sider {
    width: 500px;
}

后来发现在文章中含有代码块的时候(代码块使用了overflow:auto,代码宽度超过内容宽度需要有滚动条),内容宽度为最大宽度800px并且不会自适应,经搜索只需要在内容元素加上width: 0就可以了,更新后的样式代码如下:

.content {
    display: flex;
}
.article {
    flex: 1;
    max-width: 800px;
    width: 0;
}
.sider {
    width: 500px;
}
FlexCSS