Я пытаюсь масштабировать div в flexbox, чтобы он соответствовал всему родительскому div, я могу сделать это частично, но есть некоторые сложности, например, когда я масштабирую его, последний родитель берет его и перемещает один столбец влево, как я могу поместить его в фиксированное положение, чтобы масштабируемый div только масштабировал и не вызывал другие движения? Мне нужно, чтобы он был полностью адаптирован ко всей ширине и высоте. Вот мой код:Изменить размер div на всю ширину родителя
$(document).ready(function() {
\t
\t $('.div_service').click(function(event) {
\t \t \t $(this).toggleClass('bigger');
\t });
});
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
padding: 0;
margin: 0; }
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #1C1C1C; }
.div_services {
/* padding: 10%; */
margin: 10% auto;
top: 15%;
position: relative;
width: 90%; }
.div_services_sub {
list-style-type: none;
display: flex;
flex-flow: row wrap;
border-collapse: collapse;
text-align: center;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
position: relative; }
.div_services_sub .bigger {
transition: all 0.5s ease;
position: absolute;
width: 100% !important;
height: 100% !important;
z-index: 99;
padding: 0 !important;
margin: 0 !important; }
.div_services_sub .div_service {
border: 2px solid #FEC70B;
padding: 60px 5px;
background-color: #000000;
color: #FEC70B;
width: 32%;
height: 100px; }
.div_services_sub .div_service a {
position: relative;
padding: 10px;
margin: 10px 0;
text-decoration: none;
color: #FEC70B; }
.div_services_sub .div_service a:hover {
color: white; }
/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_services">
\t <div class="div_services_sub 1" >
\t \t \t <div class="div1 div_service">
\t \t \t \t <h3>Title</h3>
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt</h4>
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> \t
\t \t \t </div>
\t \t \t <div class="div2 div_service">
\t \t \t \t <h3>Title</h3>
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtu</h4>
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a>
\t \t \t </div>
\t \t \t <div class="div3 div_service">
\t \t \t \t <h3>Title</h3>
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtit.</h4>
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> \t
\t \t \t </div>
\t \t \t \t <div class="div4 div_service">
\t \t \t \t <h3>Title</h3>
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivti.</h4>
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a>
\t \t \t \t </div>
\t \t \t \t <div class="div5 div_service">
\t \t \t \t <h3>Title</h3>
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivt/h4>
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a>
\t \t \t \t </div>
\t \t \t \t <div class="div6 div_service">
\t \t \t \t <h3>Title</h3>
\t \t \t \t <h4>Lorem ipsum dolor sit amet, consectetur adipisicing edivtis?</h4>
\t \t \t \t <a class="readmore" href="#" title="">Read more...</a> \t
\t \t \t \t </div>
\t </div>
</div>
прогибается: 1, на ребенка. – pol