CODEWITHSUNDEEP
htmlcssoverflowcontainers
user3340372
user3340372

Reputation:

HTML/CSS line break when text overflows container

On my website, the Lorem Ipsum text overflows the container. How can I automatically add a line break when the text reaches its container's borders.

I have created this JSFiddle to demonstrate my issue.

HTML:

<body>
    <div id="wrapper">
        <div id="content">      
            <div class="flex">
                <div class="flexchild">
                    <img src="img.jpg" width="200"></img>
                </div>
                <div class="flexchild">
                    <p>
                       Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body,html {
  background: #fff;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

#wrapper{
  background: #ccc;
  height: 100%;
}

.flex {
  width: 100%;
  height: 340px;
  display: -webkit-box;
  display: flex;
}

.flexchild {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  overflow: auto;
  display: block;
}

Upvotes: 2

Views: 2760

Answers (2)

Sumner Evans
Sumner Evans

Reputation: 9155

You need to use 0 instead of auto:

.flexchild {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  overflow: auto;
  display: block;
}

See this JSFiddle, or run the code snippet below.

body,
html {
  background: #fff;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
#wrapper {
  background: #ccc;
  height: 100%;
}
.flex {
  width: 100%;
  height: 340px;
  display: -webkit-box;
  display: flex;
}
.flexchild {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  overflow: auto;
  display: block;
}
<body>
  <div id="wrapper">
    <div id="content">
      <div class="flex">
        <div class="flexchild">
          <img src="http://www.engraversnetwork.com/files/placeholder.jpg" width="200"></img>
        </div>
        <div class="flexchild">
          <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</body>

Further Reading:

MDN Documentation for flex-basis, the third parameter of flex

Upvotes: 1

Lance
Lance

Reputation: 3932

I'm not familiar with the css flex bits but removing these 2 lines makes the text flow as you want.

-webkit-flex: 1 0 auto;
flex: 1 0 auto;

Upvotes: 0

Related Questions