#StackBounty: #html #css #alignment Dynamic horizontal list with variable width lines and content between nodes

Bounty: 50

I have a system that generates a list of nodes which may or may not have additional elements between the nodes. I want to visualize this list horizontally with lines connecting the nodes as shown in the example below.

The content between two nodes is variable and can even contain more complex elements like images and tables. The nodes themselves are labeled with only text (Point A, Point B, etc.).

Fig 1

Code & What I have tried so far

In my first attempt at trying to visualize the nodes I simply used a vertical list with the :before and :after CSS pseudo-elements to draw the lines between the nodes. I am however having difficulty translating this approach to a horizontal list.

Vertical approach:

h1, h2 {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
    text-align: left;
}
ul li {
    padding: 0 0 20px 50px;
    position: relative;
    margin: 0;
}
ul li:after {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 300;
    content: "f111";
    height: 24px;
    width: 24px;
    text-align: center;
    line-height: 24px;
    background: #fff;
}
ul li:before {
    position: absolute;
    left: 11px;
    top: 0;
    content: "";
    height: 100%;
    width: 0;
    border-left: 2px solid #000;
}
ul li:last-of-type:before {
    border: none;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<ul>
    <li>
        <h2>Node A</h2>
        
Content
</li> <li> <h2>Node B</h2>
Content
</li> <li> <h2>Node C</h2> </li> </ul>

Horizontal approach:

h1, h2 {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
}
ul li {
    display: inline-block;
    position: relative;
    border-bottom: 2px solid #000;
}
ul li:after {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 300;
    content: "f111";
    height: 24px;
    width: 24px;
    background: #fff;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<ul>
    <li>
        <h2>Node A</h2>
        
Content
</li> <li> <h2>Node B</h2>
Content
</li> <li> <h2>Node C</h2>
Content
</li> </ul>

I simply don’t really know how to align all of this properly. How can I achieve what is depicted in the example image above?

Constraints

  • I only support the latest version of modern browsers, so no compatibility is required for ancient browsers;
  • I prefer an HTML(5) and CSS only approach


Get this bounty!!!

#StackBounty: #css #flexbox #css-calc #space-between Flexbox space-between has extra 1px gap at the end when using calc()

Bounty: 50

I was developing a grid system using flexbox’s justify-content: space-between; and I noticed that on certain screen sizes (about every other pixel) a 1 pixel gap appears at the end of certain columns.

If you start to resize your browser with the example below, you can see the 1 pixel space appearing and disappearing.

Example

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

* {
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 550px;
  width: 100%;
  margin: 0 auto;
  border: 2px solid #888;
  justify-content: space-between;
}

div[class^="col"] {
  border: 2px solid red;
}

.col-12 {
  flex-basis: calc(100% - 4px);
}

.col-11 {
  flex-basis: calc(11/12*100% - (1.167 - 11/12)*24px);
}

.col-10 {
  flex-basis: calc(5/6*100% - (1.167 - 5/6)*24px);
}

.col-9 {
  flex-basis: calc(3/4*100% - (1.167 - 3/4)*24px);
}

.col-8 {
  flex-basis: calc(2/3*100% - (1.167 - 2/3)*24px);
}

.col-7 {
  flex-basis: calc(7/12*100% - (1.167 - 7/12)*24px);
}

.col-6 {
  flex-basis: calc(1/2*100% - (1.167 - 1/2)*24px);
}

.col-5 {
  flex-basis: calc(5/12*100% - (1.167 - 5/12)*24px);
}

.col-4 {
  flex-basis: calc(1/3*100% - (1.167 - 1/3)*24px);
}

.col-3 {
  flex-basis: calc(1/4*100% - (1.167 - 1/4)*24px);
}

.col-2 {
  flex-basis: calc(1/6*100% - (1.167 - 1/6)*24px);
}

.col-1 {
  flex-basis: calc(1/12*100% - (1.167 - 1/12)*24px);
}
col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-6
col-3
col-3
col-3
col-3
col-4
col-8
col-7
col-5
col-6
col-4
col-2
</div>

Here is a working Fiddle so you can resize it more easily.

JSFiddle

*Note:
I know that I’m doing some crazy stuff with the calc(), but even if you just subtract 5px instead of (1.167 - 1/12)*24px) the issue still exists.

Is this a bug with flexbox?

What do I need to do in order to remove the gap at the end of these columns?


Get this bounty!!!