Question: I am trying to display text inside a container. The value of the text itself is formatted but when I add it to the block the format is condensed and it overflows past the box.

How can I keep the format of the text as well as add a scrollbar in the container to keep it from overflowing?

[![enter image description here](https://i.stack.imgur.com/CobVp.png)](https://i.stack.imgur.com/CobVp.png)

The span value as shown escapes the container but if you look above in the grey area the value itself is formatted correctly upon inspection 

[![enter image description here](https://i.stack.imgur.com/XQVZr.png)](https://i.stack.imgur.com/XQVZr.png)

Snippet:

```css
.container-card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  height: 20vh;
}
```

```html
<div class="container">
  <span style="overflow: scroll !important;">Some text</span>
</div>
```

Answer: 
use `overflow-y` for the container not the `span`, and use `<pre>` to display formatted code :

```css
.container {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 50vh;
    overflow-y: scroll;
}
```

```html
<div class="container">
<pre>
DECLARE N INTEGER;
 SET N = 1;
 FOR C 
 AS C_USR_MISE_A_JOUR 
    CURSOR FOR 
       SELECT USR_ID, USR_NOM
       FROM   T_UTILISATEUR_USR
       ORDER  BY USR_ID
    FOR UPDATE OF USR_NOM
 DO
    IF MOD(N, 2) = 0
    THEN
       UPDATE T_UTILISATEUR_USR

DECLARE N INTEGER;
 SET N = 1;
 FOR C 
 AS C_USR_MISE_A_JOUR 
    CURSOR FOR 
       SELECT USR_ID, USR_NOM
       FROM   T_UTILISATEUR_USR
       ORDER  BY USR_ID
    FOR UPDATE OF USR_NOM
 DO
    IF MOD(N, 2) = 0
    THEN
       UPDATE T_UTILISATEUR_USR

DECLARE N INTEGER;
 SET N = 1;
 FOR C 
 AS C_USR_MISE_A_JOUR 
    CURSOR FOR 
       SELECT USR_ID, USR_NOM
       FROM   T_UTILISATEUR_USR
       ORDER  BY USR_ID
    FOR UPDATE OF USR_NOM
 DO
    IF MOD(N, 2) = 0
    THEN
       UPDATE T_UTILISATEUR_USR
</pre>
</div>
```
You can use `pre` to keep the formatting and then set the `overflow` to `scroll`

I made a [codepen example here](https://codepen.io/anon/pen/YLZbGL)

The first block of lorem ipsum is styled, the next is default `pre` to show how it looks without any styling.

Is this what you want?