Border on the full width of grid

All we need is an easy explanation of the problem, so here it is.

I have grid:

body {
    display: block;
    margin: 8px;
}

.GridTable {
  position: relative;
  display: flex;
  width: auto;
  flex-direction: column;
}

.TableRows {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.TableRow {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-bottom:2px solid black
}

.TableHeader {
    position: relative;
    /* width: 100%; */
    display: flex;
    flex-direction: row;
}

.headerItem {
  flex: none;
  width: 200px;
  min-height: 100px;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all
}
<div class="GridTable">
  <div class="TableHeader">
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>


  </div>
  <div class="TableRows">
    <div class="TableRow">
          <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
    <div class="headerItem">time2</div>
      // many others column values
    </div>
    <div class="TableRow">
          <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
    <div class="headerItem">time</div>
      // many others column values
    </div>
  </div>
</div>

The grid holds many columns as and its values => is does not fit on 100% screen size, to it is scrollable to the left/right ( and thus width:auto )

However when i add border-bottom: 2px solid white to the TableRow class, the border has only width of 100% of the screen size, the other part of the row does not have the border.

How do i add border that is beneath whole TableRow and not only first 100% of screen size?

Thanks for help!

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Okay, so what is scrolling is HTML, not your grid ;).

Your contents are overflowing the block containers which are laying on 100% of the width available.

I see a few option to allow them grow wider than the parent.

  • Turn the parent into an inline-flex container.
body {
  display: block;
  margin: 8px;
}

.GridTable {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  }

.TableRows {
  position: relative;
  
  display: flex;
  flex-direction: column;
}

.TableRow {
  position: relative;
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid black
}

.TableHeader {
  position: relative;
  display: flex;
  flex-direction: row;
}

.headerItem {
  flex: none;
  width: 200px;
  min-height: 100px;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all
}
<div class="GridTable">
  <div class="TableHeader">
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
  </div>
  <div class="TableRows">
    <div class="TableRow">
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      // many others column values
    </div>
    <div class="TableRow">
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      // many others column values
    </div>
  </div>
</div>
  • Use min-width:min-content
body {
  display: block;
  margin: 8px;
}

.GridTable {
  position: relative;
  display: flex;
  flex-direction: column;
  /* here min-width:min-content; or next child container */
  }

.TableRows {
  position: relative;
  display: flex;
  min-width:min-content;/* here */
  flex-direction: column;
}

.TableRow {/* not here since it has more than a single child */
  position: relative;
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid black
}

.TableHeader {
  position: relative;
  display: flex;
  flex-direction: row;
}

.headerItem {
  flex: none;
  width: 200px;
  min-height: 100px;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all
}
<div class="GridTable">
  <div class="TableHeader">
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
  </div>
  <div class="TableRows">
    <div class="TableRow">
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      // many others column values
    </div>
    <div class="TableRow">
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      // many others column values
    </div>
  </div>
</div>
  • or even make the main container a table-layout container, so it will grow from the contents it holds.
body {
  display: block;
  margin: 8px;
}

.GridTable {
  position: relative;
  display:table;
  }

.TableRows {
  position: relative;      
  display: flex;
  flex-direction: column;
}

.TableRow {
  position: relative;
  display: flex;
  flex-direction: row;
  border-bottom: 2px solid black
}

.TableHeader {
  position: relative;
  display: flex;
  flex-direction: row;
}

.headerItem {
  flex: none;
  width: 200px;
  min-height: 100px;
  height: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all
}
<div class="GridTable">
  <div class="TableHeader">
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
    <div class="headerItem">time1</div>
  </div>
  <div class="TableRows">
    <div class="TableRow">
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      <div class="headerItem">time2</div>
      // many others column values
    </div>
    <div class="TableRow">
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      <div class="headerItem">time</div>
      // many others column values
    </div>
  </div>
</div>

There should be more answers to come about inline-block/grid/flex behavior and min-width 😉

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply