CODEWITHSUNDEEP
htmlcssflexboxword-wrap
Mihai
Mihai

Reputation: 2927

Text not wrapping inside a flex container

I managed to use the Flexible Box Layout Module for a lot of things, however when it comes to paragraphs I'm experiencing this issue:

Here is the code I am using:

body {
  width: 90%;
  margin: 3em auto;
  background-color: #aaa;
}
section {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid black;
}
.title {
  flex: 1 0 100%;
  text-align: center;
  background-color: #eee;
}
.image {
  flex: 0 0 auto;
  background-color: #ccc;
}
.image img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
.text {
  flex: 6 0 auto;
  background-color: #96AED1;
}
<section>
  <div class="title">
    <h1>Title here</h1>
  </div>

  <div class="image">
    <img src="http://www.example.com/some-imgage.png">
  </div>

  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis velit, ullamcorper eu ornare sed, vulputate quis diam. Duis ultrices rutrum sapien, in condimentum nibh sagittis sit amet. Morbi sit amet rhoncus dui, at pharetra nisi. Nunc et
      lacus porttitor, pretium nisl at, sollicitudin velit. Donec felis nisl, consequat vitae egestas vestibulum, egestas non tortor. Cras mattis non sem nec aliquam. Sed dignissim sit amet sapien vitae feugiat. Pellentesque vel luctus ante, quis ornare
      purus. Nulla in arcu sapien. Aenean tempor arcu ac lacinia pellentesque. Quisque vulputate maximus augue, non aliquet ligula gravida in. Donec a leo justo. Integer velit eros, blandit sit amet elit eget, efficitur mollis nulla. Suspendisse tempor
      ligula facilisis scelerisque ullamcorper. Ut vehicula ligula ipsum, cursus condimentum sapien pretium ac.</p>
  </div>
</section>

Why is the <p> tag not wrapping properly when using a large amount of text?

Upvotes: 24

Views: 28138

Answers (4)

Gabriel Petersson
Gabriel Petersson

Reputation: 10412

If the parents width is not set, the text will not know when to start wrapping.

Setting either the width or max-width property will let the string know when to start wrapping

Upvotes: 1

bob
bob

Reputation: 197

the .text's parent has flex-direction: row, so .text should have shrink set on 1 otherwise the text inside won't wrap 

body {
  width: 90%;
  margin: 3em auto;
  background-color: #aaa;
}
section {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid black;
}
.title {
  flex: 1 0 100%;
  text-align: center;
  background-color: #eee;
}
.image {
  flex: 0 0 auto;
  background-color: #ccc;
}
.image img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
.text {
  flex: 6 1 auto;  /* FLEX-SHRINK: 1; */
  background-color: #96AED1;
}
<section>
  <div class="title">
    <h1>Title here</h1>
  </div>

  <div class="image">
    <img src="http://www.macovei-sculptor.ro/img.jpg">
  </div>

  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis velit, ullamcorper eu ornare sed, vulputate quis diam. Duis ultrices rutrum sapien, in condimentum nibh sagittis sit amet. Morbi sit amet rhoncus dui, at pharetra nisi. Nunc et
      lacus porttitor, pretium nisl at, sollicitudin velit. Donec felis nisl, consequat vitae egestas vestibulum, egestas non tortor. Cras mattis non sem nec aliquam. Sed dignissim sit amet sapien vitae feugiat. Pellentesque vel luctus ante, quis ornare
      purus. Nulla in arcu sapien. Aenean tempor arcu ac lacinia pellentesque. Quisque vulputate maximus augue, non aliquet ligula gravida in. Donec a leo justo. Integer velit eros, blandit sit amet elit eget, efficitur mollis nulla. Suspendisse tempor
      ligula facilisis scelerisque ullamcorper. Ut vehicula ligula ipsum, cursus condimentum sapien pretium ac.</p>
  </div>
</section>

Upvotes: 6

Kiong
Kiong

Reputation: 824

The proper solution is either to put

white-space: initial;

or

min-width: 0;

Check out the link here

*I am aware the link is about truncating texts. However, the same solution applies to wrap the texts around.

Upvotes: 20

Craig van Tonder
Craig van Tonder

Reputation: 7677

I have a solution that seems to work but I do not that it is 100% correct, here is a fiddle:

https://jsfiddle.net/2xxorq4n/1/

And here is the CSS code:

body {
  width: 90%; 
  margin: 3em auto;
  background-color: #aaa;
}
section {
  border:1px solid black;
}
.title {
  text-align: center;
  background-color: #eee;
}
.image { 
  background-color: #ccc;
}
.image img {
  display: block; 
  max-height: 100%; 
  max-width: 100%;
}
.text { 
  background-color: #96AED1;
}
/* FLEX STYLES */
section {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.title, .image, .text {
  flex: 1 100%;
}
@media all and (min-width: 600px) {
  .image { flex: 1 auto; }
}
@media all and (min-width: 800px) {
  .text { flex: 800 0px; }
  .image { order: 1; }
  .text { order: 2; }
}

Specifically, I do not think that this is correct: .text { flex: 800 0px; }. Although it seems to work, I do not think that it is supposed to work like that as the example on css tricks website which provides further information on Flexbox usage shows flex: 2 0px;:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions