Расширение фона на прокручиваемом контейнере flexbox

Как увеличить фон вправо с помощью flexbox и контейнера с ограниченной шириной?Расширение фона на прокручиваемом контейнере flexbox

Пробелы - это теги, которые должны содержать фоновый цвет, а не родительские теги. (Потому что цвет может быть различным для каждого диапазона)

Я знаю, что дисплей table и table-row фиксирует это, но это дает мне еще проблемы с отступами и границами, поэтому я хотел бы использовать flexbox модели.

Существует еще одно требование: фон должен простираться до самого широкого диапазона, поэтому все пролеты должны иметь одинаковую ширину и распространять фон в том же положении.

pre { 
 
    width: 300px; 
 
} 
 

 
code { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: auto; 
 
} 
 

 
span { 
 
    background-color: #ddd; 
 
}

<pre> 
 
    <code> 
 
    <span>sadfasdsad asd adsads das ads dasdasdas dasd as das</span> 
 
    <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads das ads dasdas</span> 
 
    </code> 
 
</pre>

источник

2017-01-28 Félix Sanz

Так как это не может быть сделано правильно в макете колонке, [колонка-режим-контейнер-делает-не-расти-ее ширины] (http://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width), какие у вас проблемы с 'display: table' /' display: table-row '? – LGSon

Ну, придумал способ, который может быть опцией, отправил его как ответ – LGSon

Если вы переставить ваши правила CSS/свойства немного будет работать

pre { 
 
    width: 300px; 
 
    display: flex; 
 
    overflow: auto; 
 
} 
 
code { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
span { 
 
    background-color: #ddd; 
 
} 
 
span ~ span { 
 
    background-color: #aaa; 
 
}

<pre> 
 
    <code> 
 
     <span>sadfasdsad asd adsads das ads dasdasdas dasd as das</span> 
 
     <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads das ads dasdas</span> 
 
    </code> 
 
</pre>

Обновлено

Нежелательный дополнительное расстояние, которое происходит в IE11/EDGE (и, возможно, еще несколько) может быть решена удалением разрывы строк/пространство в разметке

<pre> 
    <code><span>sadfasdsad asd adsads das ads dasdasdas dasd as das</span><span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads das ads dasdas</span></code> 
</pre>

Другой вариант - изменить pre/code на div (проверено с успехом на Chrome, Firefox, Edge, IE11)

div.pre { 
 
    width: 300px; 
 
    display: flex; 
 
    overflow: auto; 
 
} 
 
div.code { 
 
    display: flex; 
 
    flex-direction: column; 
 
    white-space: nowrap; 
 
} 
 
span { 
 
    background-color: #ddd; 
 
} 
 
span ~ span { 
 
    background-color: #aaa; 
 
}

<div class="pre"> 
 
    <div class="code"> 
 
     <span>sadfasdsad asd adsads das ads dasdasdas dasd as das</span> 
 
     <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads das ads dasdas</span> 
 
    </div> 
 
</div>

источник

2017-01-29 14:16:14 LGSon

@ FélixSanz Жду ответа на это ... и дайте мне знать вопрос, который у вас был с 'display: table', и я разработал решение для этого тоже, может быть хорошо, если проблема flexbox не может быть исправлена. – LGSon

@ FélixSanz Вот скриншот из моего IE11: https://i.stack.imgur.com /Z20Sa.png – LGSon

@ FélixSanz Нет, все еще ожидая ответа и предложения по исправлению, и поскольку IE11 имеет много ошибок, когда дело доходит до 'flexbox', это может быть невозможно решить ... Между тем, можете ли вы сообщить мне вопрос у вас есть с 'display: table', я решил многое с помощью IE11/10/9 – LGSon

Добавить margin:auto в span

pre { 
 
    width: 300px; 
 
} 
 

 
code { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: auto; 
 
} 
 

 
span { 
 
    background-color: #ddd; 
 
    margin: auto; 
 
}

<pre> 
 
    <code> 
 
    <span>sadfasdsad asd adsads das ads dasdasdas dasd as das</span> 
 
    <span>sadfdas das adsdsad sa dasda s adsasdsad asd adsads das ads dasdas</span> 
 
    </code> 
 
</pre>

источник

2017-01-28 13:14:34

Но это не делает их одинаковой ширины –

Расширение фона на прокручиваемом контейнере flexbox

ответ

Смежные вопросы