HTML display child div in new line when it exceeds parent div

user_11220385 0
Viewed 3229

CHECK DEMO

I am trying bring the child div element to a new line when the parent div's width exceeds.I tried display:flex ,but when the parent width is exceeded the child div does not come to a new line.Like a bootstrap class row when the child div elements exceeds width of parent element it should be placed in new line.

HTML

 <div class="wrap">
      <div class="block">Block 1</div>
      <div class="block">Block 2</div>
      <div class="block">Block 3</div>
      <div class="block">Block 4</div>
      <div class="block">Block 5</div>
</div>

CSS

.wrap
{
  width:140px;
  display:flex;
  background:yellow;
}
.block
{
  margin-right:5px;
  width:70px;
}
flexbox css html
2 Answers

.wrap
{
  width:140px;
  flex-flow:row wrap;
  display: flex;
  background:yellow;
}
.block
{
  margin-right:5px;
  width:70px;
}
<div class="wrap">
      <div class="block">Block 1</div>
      <div class="block">Block 2</div>
      <div class="block">Block 3</div>
      <div class="block">Block 4</div>
      <div class="block">Block 5</div>
</div>

Check this code.You can use flex-flow: row wrap with display:flex

user_90472290

The default with display: flex; is to not allow the children to wrap - try adding the flex-wrap: wrap; property to your .wrap selector

user_114961610
Related