CSS扩展宽度

Question

我试图在鼠标悬停时扩展突出显示的代码块，以便更容易阅读代码（这部分很容易）。代码块是固定宽度和居中的。

jsFiddle

.code-wrapper {
    margin: auto;
    width: 50em;
}

pre {
    background: #e5e5e5;
    left: 0;
    max-width: 200%;
    overflow: auto;
    position: relative;
    transition: all 500ms;
    width: 100%;
}

pre:hover {
    left: -50%;
    width: 200%;
}

唯一可能的问题是，如果屏幕宽度小于120em（60em x 200％），则代码将在屏幕外扩展。

有没有办法做到这一点 没有javascript ，以防止代码块扩展超出屏幕边缘？

Answer 1

尝试使用以下CSS代码：

@media all and (min-width: 85em){
    pre:hover {
        left: -25%;
        width: 150%;
    }    
}

@media all and (min-width: 110em){
    pre:hover {
        left: -50%;
        width: 200%;
    }    
}