0

Flex ratio doesn't work.
This is my html code.
Each has one long line sentence.

This is my css file.
I put flex = 1 on each div.
But the p sentence it doesn't go down depends on flex and width..

.column-layout {
  max-width: 1300px;
  background-color: rgb(153, 22, 22);
  margin: 40px auto 0 auto;
  line-height: 1.65;
  padding: 20px 50px;
  display: flex;
}

.main-column {
  flex: 1;
}

.sidebar-one {
  flex: 1;
}

.sidebar-two {
  flex: 1;
}
<div class="column-layout">
  <div class="main-column">
    <h2>Main Column</h2>
    <p>kfjdslajfsafj;safjasjflsjalfjlasjlfjldksajlfkjsalkdjflksdjalkflksalkflsak</p>
  </div>
  <div class="sidebar-one">
    <h3>Sidebar one</h3>
    <p>klajfljlsjalfjlsdlafjlalself.</p>
  </div>
  <div class="sidebar-two">
    <h3>side 2</h3>
    <p>a</p>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
James Thomas
  • 169
  • 1
  • 3
  • 13
  • 1
    The text you put has no spaces which whats preventing it from wrapping down – Chiller Jan 11 '19 at 17:14
  • What do you expert to happen? If you want to word to wrap you need to tell it to have a look at word break or overflow wrap – Pete Jan 11 '19 at 17:14
  • why the letter doesn't go down depends on the width of my browser automatically? Bcz I think if it be put by flex1 flex1 flex1 , the letter also automatically is devided... – James Thomas Jan 11 '19 at 17:16

0 Answers0