Eugene Epifanov Eugene Epifanov - 5 months ago 18
CSS Question

Parent block doesn't shrink after children wrap

What it looks like:
SS

When I decrease the browser's window size I get:
SS

BUT I WANT IT TO LOOK LIKE THIS WITHOUT USING FLEXBOX:

SS

Here's codepen

CODE:



#one {
background-color: grey;
text-align: center;
}
#two {
display: inline-block;
text-align: left;
padding: 10px;
background-color: lightgrey;
}
.square {
display: inline-block;
width: 300px;
padding-bottom: 300px;
background-color: black;
}

<div id="one">
<div id="two">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>




Answer

Without using Flexbox, you need @media queries for that.

changed your values to make it responsive

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
#one {
  background-color: grey;
  max-width: 900px;
  margin: 0 auto;
  font-size: 0 /* inline-block gap fix */
}
#two {
  padding: 10px;
  background-color: lightgrey;
}
.square {
  display: inline-block;
  width: calc((100% / 3) - 10px);
  padding-bottom: 300px;
  background-color: black;
  margin:5px
}
@media (max-width: 768px) {
  .square {
    width:calc((100% / 2) - 10px)
  }
}
<div id="one">
  <div id="two">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>

Comments