Content is overflowing the card container

[haschdl]

What could be the cause for the content overflow? It's probably some styling missing here.

type: custom:flex-table-card
title: Departures
entities:
  include: sensor.alvjso_departures*
strict: true
columns:
  - name: Type
    data: transport
    align: center
    modify: |-
      function getIcon(transportType) {
        let ic="mdi:bus";
        switch(transportType) {
            case "Train":
              ic="mdi:train"
              break;
            case "Bus":
              ic="mdi:bus"
              break;
            default:
              ic=undefined;
              break;
        }
        return ic;
      } '<ha-icon icon=' + getIcon(x.transportType) + '></ha-icon>'
  - name: Line
    data: transport
    align: left
    modify: >-
      function getStyle(type) {
        let stl="";
        switch(type) {
           case "Bus":
             stl="";
             break;
           case "Train":
             stl = "border-radius:50% / 100%;";
             break;
        }
        return stl;
      } function getColor(subType) {
        let col = "white";        
        switch(subType) {
           case "Red":
             col = "#d71d24";
             break;
           case "Blue":
             col ="#0097da";
             break;
           case "CommuterRail":
             col = "#cc417f";
             break;
           default:
             break;
        }
        return col;
      } '<span><i style="font-style:normal; font-weight:500;text-align:center;
      padding:0.2em 0.4em 0.2em 0.4em;' + getStyle(x.transportType) +
      'background-color:' + getColor(x.transportSubType) + ';">' + x.line +
      '</i></span>' + x.destination 
  - name: Track
    data: track
  - name: Next
    data: time.displayTime
  - name: ' '
    data: consecutiveDepartureTimes
    modify: |-
      function getNext(times) {
        if(times === {}) 
          return "";
        else return Object.values(times).join(", ")[0];
      } getNext(x)

[ildar170975]

What could be the cause for the content overflow?

Long values probably.

[haschdl]

Thanks for the support @ildar170975! I learned yesterday that between <span> and text there has to be a space, otherwise the line will not break (this is just HTML basics, nothing to do with HA or the card). Also checked the configuration to display a scroll bar - all good for now, I'm closing the issue.