Flex item with
content not shrinking

Question

I have a layout where I need to hold <aside> with fixed width and middle content as fluid. Everything is fine but if you used <pre> element inside middle content and you will try to resize window to small resolution after that is <pre> without horizontal scroll and flex element is overflowed. <pre> element is as block element, with overflow: auto.

Any ideas how to resolve it?

Thanks a lot, best regards,

jsFiddle

body {
  margin: 0;
}

header {
  background-color: green;
}

footer {
  background-color: red;
}

header,
footer {
  width: 100%;
  height: 100px;
}

main {
  display: flex;
  background-color: purple;
}

aside {
  overflow-x: hidden;
  flex: 0 0 270px;
}

article {
  flex-grow: 1;
  min-height: 100vh;
  background-color: lightgray;
}

pre {
  overflow: auto;
  font-size: 87.5%;
  color: #dc3545;
}

<header>
  header
</header>
<main>
  <aside>
    aside left
  </aside>
  <article>
    <h1>CONTENT</h1>
    <pre>
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary&quot; data-num-badge=&quot;9&quot;&gt;Primary button&lt;/button&gt;
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary num-badge--border-primary&quot; data-num-badge=&quot;9&quot;&gt;Primary button&lt;/button&gt;
&lt;button class=&quot;btn btn-primary num-badge num-badge--text-primary num-badge--border-primary num-badge--font-awesome&quot; data-num-badge=&quot;&amp;#xf021;&quot;&gt;Primary button&lt;/button&gt;
&lt;a class=&quot;num-badge&quot; data-num-badge=&quot;9&quot;&gt;Basic Link&lt;/a&gt;;</pre>
  </article>
  <aside>
    aside right
  </aside>
</main>
<footer>
  footer
</footer>

score 3 · Accepted Answer · answered Mar 13 '18 at 15:25

3

You have the overflow: auto on the pre element.

pre {
  overflow: auto;
  font-size: 87.5%;
  color: #dc3545;
}

It cannot overflow itself. It overflows the parent.

So, move the overflow to article.

article {
  overflow: auto; /* new */
  flex-grow: 1;
  min-height: 100vh;
  background-color: lightgray;
}

revised jsfiddle

The problem and solution is explained in more detail here:

Why don't flex items shrink past content size?

answered Mar 13 '18 at 15:25

Michael Benjamin

346,931
104
581
701

I don't want to have scrollbar on article. Try set `max-width: 350px;` on `
` and you will see that `
` can have scrollbar on itself.
– Lukáš Strišovský Mar 13 '18 at 15:30

I misunderstood you by one level. So you want the content of `

` to overflow ``. I thought you wanted `` overflowing `article`.

– Michael Benjamin Mar 13 '18 at 15:35

Then instead of `overflow: auto` on the `article`, use `min-width: 0` and restore `overflow: auto` on `
```
`. https://jsfiddle.net/evwh3mh2/13/
```
– Michael Benjamin Mar 13 '18 at 15:37
So now this question is a complete duplicate of the post I referenced in my answer. – Michael Benjamin Mar 13 '18 at 15:38
Exactly! Oh, man. You save my day now :) it works well! Thank you. Can you explain me, why `min-width` is working? EDIT: Oukey, thank you. I will go read it all because previous I think that you don't understand me. – Lukáš Strišovský Mar 13 '18 at 15:41
You're welcome. The explanation is in the duplicate. If you have any other questions let me know. – Michael Benjamin Mar 13 '18 at 15:43

Flex item with
content not shrinking

1 Answers1

Linked

Flex item with content not shrinking

1 Answers1

Linked

Flex item with
content not shrinking