CSS таблица с содержимым прыгающей ячейки

Question

Я пытаюсь создать простое приложение React для отображения контента, как в таблице.Все хорошо, когда содержимое для отображения короткое, как на изображении ниже.

Но если содержимое большое, я хочу переместить его в следующую ячейку, какна изображении ниже.

Можно ли добиться этого с помощью CSS?Или у вас сейчас есть какое-то решение для решения этой проблемы?Я не хочу никаких overflows.

Вот мой пример кода: https://jsfiddle.net/f0b5nk6d/18/ Как видите, содержимое пересекается вместе.

Answer 1

Проблема в вашем коде (jsfiddle) в том, что вы установили высоту для класса .sale-item, и вам нужно, чтобы она была переполнена, удалите этот класс, и это будет хорошо, как показано в следующем рабочем фрагменте.

body {
  margin: 0;
}

.container {
  background-color: #000;
  width: auto;
  padding: 5px;
}

.sale-item-container {
  display: inline-block;
  column-width: calc(100vw/4);
  height: 99vh;
}

.sale-item {
  /* height: calc(99vh/2); */ /* Removed */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script type="text/javascript" src="https://unpkg.com/react/umd/react.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://fiddle.jshell.net/js/babel/babel.js"></script>



<div id="root"></div>
<script type="text/jsx" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy">
  const data = [{
    id: 0,
    header: 25,
    items: [{
      name: "FANTA 0.2 L",
      count: 1,
      subItems: [{
        name: "+ lód"
      }]
    }, {
      name: "COCA-COLA 0.2 L",
      count: 1,
      subItems: [{
        name: "BEZ LODU"
      }]
    }]
  }, {
    id: 0,
    header: 26,
    items: [{
      name: "FANTA 0.2 L",
      count: 1,
      subItems: []
    }, {
      name: "COCA-COLA 0.2 L",
      count: 1,
      subItems: [{
        name: "BEZ LODU"
      }]
    }]
  }, {
    id: 0,
    header: 27,
    items: [{
      name: "FANTA 0.2 L",
      count: 1,
      subItems: [{
        name: "+ lód"
      }]
    }, {
      name: "COCA-COLA 0.2 L",
      count: 1,
      subItems: []
    }]
  }, {
    id: 0,
    header: 40,
    items: [{
      name: "SAŁATKA DUŻA",
      count: 1
    }, {
      name: "SAŁATKA DUŻA",
      count: 1,
      subItems: [{
        name: "z kurczakiem"
      }, {
        name: "sos duży"
      }]
    }, {
      name: "ŚREDNIA: PIZZA",
      count: 0.5,
      subItems: [{
        name: "standard"
      }, {
        name: "sos bbq"
      }, {
        name: "cebula"
      }, {
        name: "ser"
      }, {
        name: "chilli"
      }, {
        name: "chipsy"
      }, {
        name: "oliwki"
      }]
    }, {
      name: "ŚREDNIA: PIZZA",
      count: 0.5,
      subItems: [{
        name: "ciasto"
      }, {
        name: "sos bbq"
      }, {
        name: "boczek"
      }, {
        name: "parmezan"
      }, {
        name: "ser"
      }, {
        name: "feta"
      }, {
        name: "cebula"
      }, {
        name: "sos śmietanowy"
      }]
    }]
  }, {
    id: 0,
    header: 38,
    items: [{
      name: "FANTA 0.2 L",
      count: 1,
      subItems: [{
        name: "+ lód"
      }]
    }, {
      name: "COCA-COLA 0.2 L",
      count: 1,
      subItems: [{
        name: "BEZ LODU"
      }]
    }]
  }];

  const Subitem = ({ data }) => {
    return React.createElement(
      "li",
      { className: "list-group-item", style: { paddingLeft: '25px' } },
      React.createElement(
        "div",
        null,
        React.createElement(
          "span",
          { style: { paddingLeft: '5px' } },
          data.name
        )
      )
    );
  };

  const Panel = ({ data }) => {
    return React.createElement(
      "div",
      { className: "sale-item" },
      React.createElement(
        "div",
        { className: "panel panel-default" },
        React.createElement(
          "div",
          { className: "panel-heading" },
          React.createElement(
            "div",
            { className: "panel-title" },
            data.header
          )
        ),
        React.createElement(
          "div",
          { className: "panel-body" },
          React.createElement(
            "ul",
            { className: "list-group" },
            data.items.map((data, key) => React.createElement(
              React.Fragment,
              { key: key },
              React.createElement(
                "li",
                { className: "list-group-item" },
                React.createElement(
                  "b",
                  null,
                  data.count,
                  " ",
                  data.name
                )
              ),
              data.subItems && data.subItems.map((subItem, index) => React.createElement(Subitem, { key: index, data: subItem }))
            ))
          )
        )
      )
    );
  };

  let App = class App extends React.Component {
    render() {
      return React.createElement(
        "div",
        { className: "container" },
        React.createElement(
          "div",
          { className: "sale-item-container" },
          data.map((value, index) => {
            return React.createElement(Panel, { data: value, key: index });
          })
        )
      );
    }
  };
  ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
</script>