Bootstrap media object issue

Question

Comments on my blog are based on media object, like here: https://www.codeply.com/go/5QOMEVg4FN.

But if my comment contain a large object, media object will overlap the sidebar, like here: http://www.codeply.com/go/MOERdGhDmF.

How can I fix this? Thank you!

`
` is specifically designed to ensure that lines don't break. What behavior exactly do you expect when the lines get too long? — WebDevBooster, Feb 10 '18 at 23:27
The `media` class has `display: flex`, and as flex row item's default `min-width: auto` prevents a flex item to become smaller than its content, it overflows. To make it shrink and scroll instead, add `min-width: 0;` to the `.media-body` rule. — Asons, Feb 11 '18 at 11:14
@LGSon This is *not* a duplicate and has nothing to do with flexbox. It's a Bootstrap-specific issue that requires a Bootstrap-specific class to deal with. No custom css required (or even recommended) to fix this Bootstrap issue. — WebDevBooster, Feb 11 '18 at 15:41
@WebDevBooster Bootstrap doesn't have a class for `min-width: 0` so it has to be added using custom CSS. Also, it is not possible to fix all types of layout with Bootstrap alone, hence custom CSS is needed once in a while, like in this case. Doing what you suggest breaks the Flexbox layout, which appears to be wanted here, since the `media` class were used in the first place. — Asons, Feb 11 '18 at 15:45
@LGSon Read my answer. That class there is Bootstrap's recommended way for dealing with this specific issue. — WebDevBooster, Feb 11 '18 at 15:46
@WebDevBooster And `d-block` breaks the set Flexbox, which might break a nested Flexbox structure, hence the correct way to avoid overflow in this case is `min-width: 0`. — Asons, Feb 11 '18 at 15:50
Can confirm that `min-width: 0` worked for me and `d-block` just broke the layout. — Emily, Nov 20 '21 at 04:05

score -1 · Answer 1 · answered Feb 10 '18 at 23:53

To get a horizontal scrollbar appear (and prevent the <pre><code> object from overlapping the sidebar) you need to add the d-block class (display:block) to the media element.

Here's a working code snippet (click the "run code snippet" button below and expand to full page):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <div class="container  pt-5">
        <div class="row">
            <div class="col-8" id="main">

                <div class="media d-block">
                    <div class="media-body">
                        <h5 class="mt-0">Media heading</h5>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        <pre class="code" style="background: #f1f1f1;"><code class="php"><span style="color: #0275d8; font-weight: bold;">if</span><span style="color: #A67f59;">(</span> <span style="color: #04527F;">$line_numbers</span> <span style="color: #A67f59;">&amp;&amp;</span> <span style="color: #04527F;">$line_numbers</span> <span style="color: #A67f59;">!==</span> <span style="color: #707070;">'false'</span> <span style="color: #A67f59;">)</span> <span style="color: #A67f59;">{</span>
 <span style="color: #04527F;">$output</span> <span style="color: #A67f59;">.=</span> <span style="color: #707070;">'&lt;div class="line_numbers"&gt;'</span><span style="color: #A67f59;">;</span>
&nbsp;
 <span style="color: #04527F;">$line_count</span> <span style="color: #A67f59;">=</span> <span style="color: #0275d8; font-weight: bold;">substr_count</span><span style="color: #A67f59;">(</span> <span style="color: #04527F;">$code</span><span style="color: #A67f59;">,</span> <span style="color: #707070;">"<span style="color: #000099; font-weight: bold;">\n</span>"</span> <span style="color: #A67f59;">)</span><span style="color: #A67f59;">;</span>
 <span style="color: #04527F;">$line_start</span> <span style="color: #A67f59;">=</span> <span style="color: #A67f59;">(</span> <span style="color: #0275d8; font-weight: bold;">is_numeric</span><span style="color: #A67f59;">(</span> <span style="color: #04527F;">$line_numbers</span> <span style="color: #A67f59;">)</span> ? <span style="color: #04527F;">$line_numbers</span> <span style="color: #A67f59;">:</span> <span style="color: #70B9EF;">1</span> <span style="color: #A67f59;">)</span><span style="color: #A67f59;">;</span>
&nbsp;
 <span style="color: #0275d8; font-weight: bold;">for</span><span style="color: #A67f59;">(</span> <span style="color: #04527F;">$i</span> <span style="color: #A67f59;">=</span> <span style="color: #70B9EF;">0</span><span style="color: #A67f59;">;</span> <span style="color: #04527F;">$i</span> <span style="color: #A67f59;">&lt;=</span> <span style="color: #04527F;">$line_count</span><span style="color: #A67f59;">;</span> <span style="color: #04527F;">$i</span><span style="color: #A67f59;">++</span> <span style="color: #A67f59;">)</span> <span style="color: #A67f59;">{</span>
  <span style="color: #0275d8; font-weight: bold;">if</span><span style="color: #A67f59;">(</span> is_tax<span style="color: #A67f59;">(</span> <span style="color: #707070;">'files'</span> <span style="color: #A67f59;">)</span> <span style="color: #A67f59;">)</span>
  <span style="color: #A67f59;">{</span>
   <span style="color: #04527F;">$output</span> <span style="color: #A67f59;">.=</span> <span style="color: #707070;">'&lt;span id="L'</span> <span style="color: #A67f59;">.</span> <span style="color: #0275d8; font-weight: bold;">sprintf</span><span style="color: #A67f59;">(</span><span style="color: #707070;">"<span style="color: #009933; font-weight: bold;">%02d</span>"</span><span style="color: #A67f59;">,</span> <span style="color: #04527F;">$i</span> <span style="color: #A67f59;">+</span> <span style="color: #70B9EF;">1</span> <span style="color: #A67f59;">)</span> <span style="color: #A67f59;">.</span> <span style="color: #707070;">'"&gt;'</span> <span style="color: #A67f59;">.</span> <span style="color: #A67f59;">(</span> <span style="color: #04527F;">$line_start</span> <span style="color: #A67f59;">+</span> <span style="color: #04527F;">$i</span> <span style="color: #A67f59;">)</span> <span style="color: #A67f59;">.</span> <span style="color: #707070;">"&lt;/span&gt;<span style="color: #000099; font-weight: bold;">\n</span>"</span><span style="color: #A67f59;">;</span>
  <span style="color: #A67f59;">}</span>
  <span style="color: #0275d8; font-weight: bold;">else</span>
  <span style="color: #A67f59;">{</span>
   <span style="color: #04527F;">$output</span> <span style="color: #A67f59;">.=</span> <span style="color: #A67f59;">(</span> <span style="color: #04527F;">$line_start</span> <span style="color: #A67f59;">+</span> <span style="color: #04527F;">$i</span> <span style="color: #A67f59;">)</span> <span style="color: #A67f59;">.</span> <span style="color: #707070;">"<span style="color: #000099; font-weight: bold;">\n</span>"</span><span style="color: #A67f59;">;</span>
  <span style="color: #A67f59;">}</span>
 <span style="color: #A67f59;">}</span>
&nbsp;
 <span style="color: #04527F;">$output</span> <span style="color: #A67f59;">.=</span> <span style="color: #707070;">'&lt;/div&gt;'</span><span style="color: #A67f59;">;</span>
<span style="color: #A67f59;">}</span></code></pre>
                    </div>
                </div>

            </div>
            <div class="col-4 bg-warning">sidebar</div>
        </div>
    </div>

Since `media` were added to make the element `display: flex`, there is no reason to then also add `d-block`. By simply removing `media` will restore the default display type, which for a `div` is `block` — Asons, Feb 11 '18 at 16:00

Bootstrap media object issue

1 Answers1