博客文章详情页面为左右布局,右侧边栏固定宽度,左侧文章内容自适应;使用了 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;
}