white-space-nowrap撑出了滚动条但撑不开ul宽度
问题代码重现
问题描述
上面的代码实现了一个左右布局的主体页面，左侧内容的 li 设置了white-space:nowrap，目的是使文字不换行，如果文字很多超过了父容器的宽度，那就会出现横向滚动条。
以上都还是符合预期的，不符合预期的是white-space:nowrap撑出了横向滚动条，但却没能撑开li和ul的宽度，导致ul的宽度始终是没出现滚动条时的宽度，由于li的宽度继承自ul, 所以li的宽度也被限制在了没有横向滚动条时的宽度. 由于对li加了border-bottom: 1px solid #333;，此时就会发现这条黑色的下划线没有像预期中的充满整个宽度.
如何解决?
方案一: display: inline-block + min-width:100% + min-height:100%
方案二: 设置ul的min-width: max-content
两种方案如何选择哪个?
从 can i use 网站看min-height, min-width的兼容性是强于max-content的，从这点看个人更倾向使用方案一，但方案二明显又更简单，所以，如果在实际项目中可以忽略兼容问题，那优先采用方案二，如果兼容问题无法避免，那就采用方案一