Border on the full width of grid-CodePudding

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 >
  <div >
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>


  </div>
  <div >
    <div >
          <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
    <div >time2</div>
      // many others column values
    </div>
    <div >
          <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >time</div>
    <div >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!

CodePudding user response：

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 >
  <div >
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
  </div>
  <div >
    <div >
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      // many others column values
    </div>
    <div >
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >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 >
  <div >
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
  </div>
  <div >
    <div >
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      // many others column values
    </div>
    <div >
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >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 >
  <div >
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
    <div >time1</div>
  </div>
  <div >
    <div >
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      <div >time2</div>
      // many others column values
    </div>
    <div >
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >time</div>
      <div >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 ;)