Chrome źle wyświetla flexbox'a

pytanie zadane 6 listopada 2019 w HTML i CSS przez Job102 Bywalec (2,050 p.)

Witam,

próbuje ogarnąć "flex'a" i wszystko byłoby ok, żeby nie Chrome. W Firefox wszystko wyświetla tak jak trzeba, natomiast w Chromie, ostatnia grafika w pierwszym rzędzie przeskakuje poziom niżej.

Powinno być:

a jest:

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
	<title></title>
	
	<meta charset="utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content=""/>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	
	<link href="style.css" rel="stylesheet" type="text/css" />
	
</head>
<body>
	<div id="offert" class="content clear_margin">
		<div class="offert center">
			<div class="offert_content">
				<img class="main_offert" id="caseih" src="https://t4st.000webhostapp.com/img/sales/offert/logos/caseih.png" />
				<img class="main_offert" id="steyr" src="https://t4st.000webhostapp.com/img/sales/offert/logos/steyr.png" />
				<img class="main_offert" id="manitou" src="https://t4st.000webhostapp.com/img/sales/offert/logos/manitou.png" />

				<a class="sub_offert" href="https://lemken.com/pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/lemken.svg" />
				</a>
				<a class="sub_offert" href="https://www.poettinger.at/pl_pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/pottinger.png" />
				</a>
				<a class="sub_offert" href="https://www.uniamachines.com/pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/unia.svg" />
				</a>
				<a class="sub_offert" href="https://www.stoll-germany.com/pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/stoll.svg" />
				</a>
				<a class="sub_offert" href="https://wielton.com.pl/#" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/wielton.png" />
				</a>
				<a class="sub_offert" href="http://www.kongskilde.com/pl/pl-PL/Agriculture" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/kongskilde.png" />
				</a>
				<a class="sub_offert" href="https://www.pomot.pl/pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/pomot.png" />
				</a>
				<a class="sub_offert" href="http://www.metaltech.com.pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/metaltech.png" />
				</a>
				<a class="sub_offert" href="https://mrol.com.pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/m-rol.png" />
				</a>
				<a class="sub_offert" href="https://www.expom.com.pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/ex-pom.png" />
				</a>
				<a class="sub_offert" href="https://sonarol.pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/sonarol.png" />
				</a>
				<a class="sub_offert" href="http://metal-technik.eu/en/home/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/metal-technik.png" />
				</a>
				<a class="sub_offert" href="https://camarapolska.pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/camara.png" />
				</a>
				<a class="sub_offert" href="https://sumeramotor.pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/sumera.png" />
				</a>
				<a class="sub_offert" href="http://www.dozamech.pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/dozamech.png" />
				</a>
				<a class="sub_offert" href="http://pom.com.pl/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/pom.png" />
				</a>
				<a class="sub_offert" href="https://www.hydrac.com/" target="_blank">
					<img src="https://t4st.000webhostapp.com/img/sales/offert/logos/hydrac.png" />
				</a>
			</div>
		</div>
	</div>
</body>
</html>

CSS:

#offert
{
	margin:0 auto;
	width:1360px;
}

.offert
{
	background-color:#DED6D9;
	padding:1%;
}

.offert_content
{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

.offert_content img:hover
{
	-ms-transform:scale(1.1,1.1);
	-webkit-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}

.main_offert
{
	flex:0 0 30%;
	margin:0.5% 0.5% 5% 0.5%;
	max-height:170px;	
}

.main_offert img
{
	height:100%;
	width:100%;
}

#manitou img
{
	height:100%;
	width:100%;
}

.sub_offert
{
	flex:0 0 16%;
	margin:2%;
	max-height:75px;
}

.sub_offert img
{
	height:100%;
	width:100%;
}

Gdzie robię błąd?

Z góry dzięki.

Pozdrawiam.

2 odpowiedzi

odpowiedź 6 listopada 2019 przez edwardkraweznik Dyskutant (9,930 p.)

Prawdopodobnie szerokości okna przeglądarki są trochę inne (nieraz 1px wystarczy i przeskoczy)

Pokombinuj z tym:

#offert

{

margin:0 auto;

width:1360px;

}

zmniejsz i zwiększ trochę szerokosc i zaobacz co to da...

komentarz 6 listopada 2019 przez Job102 Bywalec (2,050 p.)

Już to przerabiałem :).

Mimo ustawień np. width:100% Chrome przy mniejszej rozdzielczości i tak wświetli to niepoprawnie, jakby brał pod uwagę wielkość grafiki.

komentarz 6 listopada 2019 przez edwardkraweznik Dyskutant (9,930 p.)
edycja 6 listopada 2019 przez edwardkraweznik

ja jak mam taki problem to ustawiam borderyna widoczne i sprawdzam co jest:

jakiselement {border: 1px solid red;}

border albo kolor tla pozmianiaj dla divów i wtedy widac co się rozciąga

tak teraz patrzę i:

Powinieneś podac alt i wymiar