Как подружить overflow с flex?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			width: 1000px;
		}

		.flex {
			display: flex;
		}

		.column1 {
			width: 500px;
			height: 500px;
			overflow: hidden;
		}

		.column1 img {
			width: 500px;
			height: 500px;
		}
	</style>
</head>
<body>
	<div class="flex">
		<div class="column1">
			<img src="images/slider/1.jpg" alt="">
		</div>
		<div class="column2">
			<h1>Заголовок</h1>
			<p>
				Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Строчка ipsum, подпоясал пустился? Текста океана пояс точках, это моей, ее себя вдали пунктуация маленькая своих ты оксмокс свой толку, злых использовало заголовок. На берегу наш курсивных, мир последний, грустный страна своих меня имеет единственное, своих продолжил вопроса сбить прямо lorem ручеек текст щеке предупреждал выйти все родного путь если рот. Языком сих большого необходимыми семь заглавных составитель всемогущая, наш первую.
			</p>
		</div>
	</div>
</body>
</html>


На выходе получаю:
5bd0c1ef6abf7843870711.png

Если убрать
overflow: hidden;

получаю :5bd0c2170bcf2369147822.png

этот же результат я хочу получить и с overflow

overflow использую, чтобы обернуть картинку. При наведении курсора, картинка увеличивается, и чтобы картинка не вылазила, обрезаю overflow. flex'ом выравниваю блоки.
Как-то можно решить эту задачу?
  • Вопрос задан
  • 1162 просмотра
Решения вопроса 1
shmatuan
@shmatuan
Vue, Node, RoR
На сколько понял задачу:
https://codepen.io/shmatkoandrey/pen/LgXeRG

.column1 {
      width: 500px;
      height: 500px;
      overflow: hidden;
      flex: 0 0 500px; // Добавить это
    }


ИЛИ

.column1 {
      width: 500px;
      height: 500px;
      overflow: hidden;
      flex: 1;  // Добавить это
    }
    
    .column2 {  // Добавить это
      flex: 1;
    }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
14 нояб. 2019, в 10:48
50000 руб./за проект
14 нояб. 2019, в 10:45
2500 руб./за проект