Есть блок, который содержит в себе два других блока. Эти два блока занимают по ширине - 25 и 75%, соответственно.
Если в блоке с 75% слишком длинный текст, то он почему-то растягивается на 10-20 пикселей в ширину. В чем проблема?
/*----------DEFAULT----------*/
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
color: #333;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
}
a {
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s linear;
}
a:hover {
color: gold;
}
.container {
width: 100%;
max-width: 1170px;
min-width: 745px;
height: 100%;
margin: 0 auto;
}
/*----------BACKGROUND----------*/
.bg {
flex-grow: 1;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: linear-gradient(#d75100, #a1005b);
background-attachment: fixed;
}
/*----------HEADER (HAT)----------*/
.hat {
width: 100%;
z-index: 1000;
}
.hat:after {
content: "";
display: block;
width: 100%;
max-width: 1170px;
height: 2px;
margin: 0 auto;
background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
opacity: 0;
transition: opacity 0.2s linear;
}
.hat:hover:after {
opacity: 1;
}
.hat_inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1170px;
min-width: 745px;
margin: 0 auto;
}
.hat_inner p {
position: relative;
bottom: 15px;
font-size: 36px;
}
.hat_inner #logoDiv {
white-space: nowrap;
}
/*----------INFO MENU (HAT)----------*/
.nav {
display: inline-block;
text-transform: uppercase;
}
.nav a {
position: relative;
bottom: -8px;
margin: 0 10px;
}
.nav a:after {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
left: 0;
background-color: gold;
opacity: 0;
transition: opacity 0.3s linear;
}
.nav a:hover:after {
opacity: 1;
}
/*----------MAIN CONTENT----------*/
.content {
flex-grow: 1;
width: 100%;
max-width: 1170px;
min-width: 745px;
margin: 0 auto;
margin-top: 30px;
display: flex;
}
.lMenu {
width: 25%;
margin: 0 15px;
background-color: gray;
}
.rMenu {
width: 75%;
margin: 0 15px;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
background-color: gray;
}
/*----------ARTICLES----------*/
.article {
position: relative;
max-width: 100%;
height: 200px;
margin-bottom: 15px;
border-radius: 10px;
background-color: #FFFFFF;
}
.article_inner {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
transition: filter 0.3s linear;
z-index: 1;
}
.article_inner:hover {
filter: blur(3px);
}
.article_inner:hover~.article_shadowing {
opacity: 0.8;
}
.article_inner #p {
flex-grow: 1;
padding: 5px 10px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
}
.article_head {
min-height: 30px;
padding: 0px 10px;
color: white;
background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.3s linear;
}
.article_head:hover {
color: gold;
}
.article_shadowing {
display: flex;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
vertical-align: middle;
border-radius: 0 0 5px 5px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: opacity 0.3s linear;
}
.article_expandb {
margin: auto auto;
padding: 5px 20px;
border: 1px solid #fff3b8;
border-radius: 5px;
color: white;
}
/*.article {
position: relative;
width: 70%;
height: 200px;
margin: 30px auto;
border-radius: 5px;
background-color: #FFFFFF;
}
.article_inner {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
transition: filter 0.3s linear;
z-index: 1;
}
.article_inner:hover {
filter: blur(3px);
}
.article_inner:hover ~ .article_shadowing {
opacity: 0.8;
}
.article_inner #p {
flex-grow: 1;
padding: 5px 10px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
}
.article_head {
min-height: 30px;
padding: 0px 10px;
color: white;
background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.3s linear;
}
.article_head:hover {
color: gold;
}
.article_shadowing {
display: flex;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
vertical-align: middle;
border-radius: 0 0 5px 5px;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: opacity 0.3s linear;
}
.article_expandb {
margin: auto auto;
padding: 5px 20px;
border: 1px solid #fff3b8;
border-radius: 5px;
color: white;
}*/
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/mainStyle.css">
<title>Try1</title>
</head>
<body>
<div class="bg">
<header class="hat">
<div class="hat_inner">
<div id="logoDiv" style="display: inline-block;">
<a href="index.php">
<img src="sources/logo.png" style="margin-top: 10px;">
</a>
<a href="index.php">
<p style="display: inline-block;">ИСС Антивирусы-фаги</p>
</a>
</div>
<nav class="nav">
<a href="#">О Проекте</a>
<a href="#">Контакты</a>
<a href="#">Войти</a>
</nav>
</div>
</header>
<div class="content">
<div class="lMenu">
</div>
<div class="rMenu">
<div class="article">
<div class="article_inner">
<h3 class="article_head">
"=$row[0]"
</h3>
<div id="p">
"=$row[1]"
</div>
</div>
<div class="article_shadowing">
<p class="article_expandb">Читать...</p>
</div>
</div>
<!--<?php
include "scripts/select_content.php";
?>-->
</div>
</div>
</div>
</body>
Видео прикрепляю: