Problem z szerokością preformatowanego kodu

[Dżyszla]

Hej,

 

Mam sobie tak zdefiniowany element:

code.src
{
	font: normal 20pt Consolas,"Lucida Console","Courier New",monospace;
	color: #EEE;
	white-space: pre;
	display: block;
	padding: 4px;
	overflow: auto;
	max-height: 300px;
}

Teoretycznie powinien on zająć całą szerokość. Niestety, jeśli w kodzie jest dłuższa linia, to szerokość dostosowuje się do niej (i nie ma poziomego paska przewijania).

Co ciekawe, jeśli użyje się 'width: 40%' to faktycznie zajmuje 40% szerokości, ale... całe okno i tak ma poziomy pasek przewijania, a sam element rozciąga elementy nadrzędne, choć jest od nich węższy. Użycie np. 'width: 200px' daje dobry rezultat, ale przestaje być to responsywne.

 

Jak się na sucho pisze, to jest ok. Ale są jakieś dziwne zależności... Nie potrafię przykładu konkretnego przedstawić, ale widać to tutaj: https://www.dzyszla.pl/porada-19.html - wystarczy usunąć obrazki i zmniejszyć szerokość okna przeglądarki.

 

 

 

Jak sobie z tym poradzić?

[atp]

To tabeli daj:

table-layout: fixed;
width: 100%;

 

[Dżyszla]

@atp Dzięki, pomaga