0

I do have a container which is displayed as grid with three children; one left (.25fr), one middle (1fr), one right (.25fr). As soon as I insert a <code> tag within the mid child which does have lots of whitespaces the entire layout is broken.

I've also tried to give the pre and/or code max widths / overflows, but nothing fixed it.

Anyone got an idea?

.test {
  width: 600px;
  background-color: #cacaca;
  display: grid;
  grid-template-columns: 0.25fr 1fr 0.25fr;
  margin-bottom: 50px;
}

.left {
  background-color: green;
}

.right {
  background-color: red;
}
<div class="test">
  <div class="left">
    left
  </div>
  <div class="mid">
    <pre>
      <code>                                                    ff</code>
    </pre>
  </div>
  <div class="right">
    right
  </div>
</div>

<div class="test">
  <div class="left">left</div>
  <div class="mid">mid</div>
  <div class="right">right</div>
</div>

Fiddle

showdev
  • 28,454
  • 37
  • 55
  • 73
nehalist
  • 1,434
  • 18
  • 45
  • because `
    ` tags have `white-space: pre;` (which is their purpose). You want `white-space: normal;` but then the white space won't be preserved.
     – zgood Jun 01 '19 at 12:36
  • Tried to change `white-space`, but that didn't fix it. Additionally I don't really get how the "dupliated question" provides an answer to my problem. – nehalist Jun 02 '19 at 09:22

0 Answers0