CODEWITHSUNDEEP
htmlcss
Meet Shah
Meet Shah

Reputation: 862

CSS: PRE tag making card size bigger than container

I have a card, which has a pre tag inside it. The problem is, that due to the pre tag, the size of the card is getting larger than the container and hence I'm getting a horizontal scroll bar on my webpage. What shall I do to make the pre tag scroll If the content size is bigger than card? Just like code snippets on stackoverflow ansers. They never extend out of the page horizontally, you get a horizontal scroll bar within the snippet.

CSS:

.main {
    width: 100%;
    background-color: green;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: flex-start;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
.menu {
    width: 200px;
    height: 300px;
    background-color: red;
    flex-grow: 0;
    flex-shrink: 0;
}
.card-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: blue;
    height: 500px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.card {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    margin: 20px;
    background-color: yellow;
    max-width: auto; height: 300px;
}
pre {
    background-color: black;
    color: white;
    overflow: scroll;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="flex-style.css">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="menu"></div>
        <div class="card-container">
            <div class="card">
                <h1 class="heading">Heading</h1>
                <p class="paragraph">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste quaerat earum cum dolore saepe eius dignissimos porro, natus ut omnis maiores deleniti repudiandae distinctio quod? Vero tempore laboriosam maxime quidem accusantium ea qui enim doloremque? Maxime accusantium fuga inventore veniam vero quaerat possimus, id magni consectetur, omnis obcaecati recusandae ipsam.
                </p>
                <pre>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa placeat quia cum, corporis amet quas repellat, nostrum inventore numquam accusamus possimus minima maxime error iusto obcaecati consequuntur fugiat magnam. Temporibus?
                </pre>
            </div>
        </div>
    </div>
</body>
</html>

Any help will be appreciated.

Upvotes: 0

Views: 1422

Answers (2)

Bartosz Władyka
Bartosz Władyka

Reputation: 17

https://www.w3schools.com/tags/tag_pre.asp

Text in a "pre" element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

If you want to have that effect instead of "pre" tag, put this:


          <div
            class="container-outer"
            style="
              overflow: scroll;
              overflow-y: hidden;
              width: 350px;
              height: 210px;
            "
          >
              <div class="container-inner" style="width: 500px">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
                placeat quia cum, corporis amet quas repellat, nostrum inventore
                numquam accusamus possimus minima maxime error iusto obcaecati
                consequuntur fugiat magnam. Temporibus? Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Culpa placeat quia cum, corporis
                amet quas repellat, nostrum inventore numquam accusamus possimus
                minima maxime error iusto obcaecati consequuntur fugiat magnam.
                Temporibus?
              </div>
          </div>

Referance

Upvotes: 0

Robo Robok
Robo Robok

Reputation: 22765

What you're looking for is the white-space: pre-wrap property:

pre {
    white-space: pre-wrap;
}

It keeps the default behavior of <pre>, so multiple spaces are being kept as well as new lines, but if the content is too wide for the parent, it gets wrapped.

Upvotes: 2

Related Questions