CODEWITHSUNDEEP
htmlcssflexbox
martinbshp
martinbshp

Reputation: 1163

Div not expanding with additional text

I have a div that will not expand downward when adding more text to it. How do I go about it. I've set flex-direction to column. Thank you.

enter image description here

.blocks {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  vertical-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}
#a1 {
  margin: 0 auto;
  margin-top: 40px;
}
#a2 {
  margin: auto auto;
}
#a3 {
  float: left;
  margin-left: 25%;
}
#a4 {
  float: right;
  margin-right: 25%;
}
#a5{
  margin: 10% auto 0;
}
<div id="container">
  <div class="blocks" id="a1"><h4>1</h4></div>
  <div class="blocks" id="a2"><h4>2</h4></div>
  <div class="blocks" id="a3"><h4>3</h4></div>
  <div class="blocks" id="a4"><h4>4</h4></div>
  <div class="blocks" id="a5"><h4>5</h4><p>some text</p>some text<p>some text</p>some text<p>some text</p>some text</div>
</div>

Upvotes: 1

Views: 84

Answers (3)

akdsfjakls
akdsfjakls

Reputation: 208

height explicitly sets the element height. In your condition You could either remove the height line or set max-height to a value you want.

An example: https://jsfiddle.net/mw3ej40b/

Upvotes: 0

Saqib Malik
Saqib Malik

Reputation: 98

Keep in mind you can always set the height as auto so the div grows as the content

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

Just remove the height you're setting and it will work. Instead you could use min-height: 100px.

Upvotes: 1

Related Questions