[csswg-drafts] Suggestion: Ability to adjust the height of a display:inline-block element without pushing away other elements. (#4973)

HT-7 has just created a new issue for https://github.com/w3c/csswg-drafts:

== Suggestion: Ability to adjust the height of a display:inline-block element without pushing away other elements. ==
Moderators of news aggregator subverses (e.g. subreddits on Reddit) are able to create a custom CSS for their community page.

But they can not edit the HTML. Therefore, they are limited to the possibilities that CSS offers.

Some moderators choose a [multi-column design for their community](http://i.imgur.com/aiZc3.png) (screenshot found [here](https://redditblog.com/2011/09/02/how-reddit-works/)), which can be achieved by reducing the width of one post element and applying `display:inline-block`. In that example screenshot, two *post boxes* are seen per row.

I have seen a different community (forgot where exactly) where each post had a box around it. Apparently, it was based on the so-called *[Naut](https://old.reddit.com/r/Naut)* design.

But there are some limitations:
* If no height is specified for each of these post info boxes, the size of the boxes will match the content, which causes the boxes in each row to have a different heights, which does not look so nice.
* If a fixed height is specified for each of these boxes, the boxes with lesser content than needed to fill that height will have an empty vertical gap, while the boxes with too much content will have an overflow that could be handled with `overflow-y:scroll;`.

But **a much more elegant solution** in the latter case would be having a box expand to its full height on :hover, but that hits two CSS walls (limitations) as well:
* One apparently can not transition smoothly from an absolute height (e.g. 150px) to a relative height (i.e. 100%).
* Unlike displacement with `position:relative` and `top`,`bottom`,`left`,`right`,  increasing the height of the boxes with `display:inline-block` pushes away the boxes in the next row. But using any other solution than `display:inline-block` would not allow a multi-column design in first place.

There are likely solutions involving HTML, but as already mentioned, moderators of subreddits on Reddit (and similar sites) are bound to the limitations of CSS. Therefore, it would be good if the possibilities of CSS get expanded, even if there is already a HTML-supported workaround.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4973 using your GitHub account

Received on Sunday, 19 April 2020 23:05:04 UTC