CODEWITHSUNDEEP
htmlcssresponsive-design
Jakub Menšík
Jakub Menšík

Reputation: 174

How to make a div grow to contain its children elements?

I have four responsive circles in one div. But the div has height and when you run code on a huge monitor, the circles are outside the div. I want to set the div's height to be the same as the circles' diameter. So after resize the div height will always be the same or bigger than circles.

#circlediv {
    position:relative;
    width:100%;
    display:inline-block;
    border:1px solid black;
}
<div id="circlediv">
   <div class="kruh" id="circle1"></div>
   <div class="kruh" id="circle2"></div>
   <div class="kruh" id="circle3"></div>
   <div class="kruh" id="circle4"></div>
</div>

I tried display: inline-block, but that didn't work.

Upvotes: 0

Views: 284

Answers (3)

satyajit rout
satyajit rout

Reputation: 1651

you can do it using display: inline-flex;

.kruh {
    width:100px;
    height:100px;

    border:1px solid red;
    display:inline-flex;
    border-radius:100%;
}

#circlediv {
    border:1px solid blue;
    width:100%;
}
<div id="circlediv">
    <div class="kruh" id="circle1"></div>
    <div class="kruh" id="circle2"></div>
    <div class="kruh" id="circle3"></div>
    <div class="kruh" id="circle4"></div>
</div>

Upvotes: 1

ProEvilz
ProEvilz

Reputation: 5455

Is this what you mean?

.kruh {
    width:100px;
    height:100px;

    border:1px solid red;
    display:inline-block;
    border-radius:100%;
}

#circlediv {
    border:1px solid blue;
    width:100%;
}
<div id="circlediv">
    <div class="kruh" id="circle1"></div>
    <div class="kruh" id="circle2"></div>
    <div class="kruh" id="circle3"></div>
    <div class="kruh" id="circle4"></div>
</div>

Upvotes: -1

Johannes
Johannes

Reputation: 67778

This example uses float for the circles and overflow: auto for the container. From your comments to the other answers I am not sure if this is what you want, but it's one way to solve it.

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.kruh {
  width: 20vw;
  height: 20vw;
  border: 1px solid #fa0;
  float: left;
  border-radius: 50%;
}

#circlediv {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
}
<div id="circlediv">
  <div class="kruh" id="circle1"></div>
  <div class="kruh" id="circle2"></div>
  <div class="kruh" id="circle3"></div>
  <div class="kruh" id="circle4"></div>
</div>

Upvotes: 1

Related Questions