html - 为什么 flex-box 会溢出包装器？

Question

我正在基于此 Codepen https://codepen.io/vasansr/pen/PZOJXr 构建响应表.基本上它按一定大小堆叠标题和列，因此无需使用滚动条即可在移动设备和平板设备上阅读。

它是堆叠的，但是当用户尝试调整窗口大小时，注释列没有正确堆叠，它溢出到 CenterOurTable div 之外。

给你一个问题的例子，这里是codepen:https://codepen.io/laurens-van-oorschot/pen/BaaZjxO .

HTML:

<div id="CenterOurTable">
  <div class='container-fluid' style='margin-top: 10px'>
    <div class="table-row header">

      <div class="wrapper attributes">

        <div class="wrapper teacher-class-type-day-times">
          <div class="wrapper teacher-class-type">
            <div class="column  teacher">

              <a class="headerselect" href="#"><i class="fas fa-angle-down"></i> Teacher </div><div class="column evenrowcolor class-type"><a class="headerselect" href="#">Class-type </div>

      </a></div>
            <div class="wrapper day-times">
              <div class="column evenrowcolor day"><a class="headerselect" href="#">Day </div><div class="column  times"><a class="headerselect" href="#">Times </div></a></div>
              <div class="wrapper venue-location-notes">
                <div class="wrapper ">
                  <div class="column  venue"><a class="headerselect" href="#">Venue </div><div class="column evenrowcolor location"><a class="headerselect" href="#">Location </div><div class="column  notes"><a class="headerselect" href="#">Notes </div></a></div>
                </div>
              </div>
            </div>
          </div>
          <div class='container-fluid' style='margin-top: 10px'>
            <div class="table-row ">
              <div class="wrapper attributes">
                <div class="wrapper teacher-class-type-day-times">
                  <div class="wrapper teacher-class-type">
                    <div class="column  teacher">Julie Webb <i class="material-icons add box" style="
    vertical-align: top !important;">
add_box</i><span class="hideinfo"><ul><li><a href='mailto:tuttifruttiyoga@hotmail.com'>tuttifruttiyoga@hotmail.com</a></li><li>07861 719143</li></ul></span></div>
                    <div class="column evenrowcolor class-type">General </div>
                  </div>
                  <div class="wrapper day-times">
                    <div class="column evenrowcolor day">Thursday </div>
                    <div class="column  times">19.45 - 20.45 </div>
                  </div>
                  <div class="wrapper venue-location-notes">
                    <div class="wrapper ">
                      <div class="column  venue">Keig Community Hall
                        <i class="material-icons box add aria-hidden=" true " style=" vertical-align: bottom !important; ">add_box</i>

</i>    <span class="hideinfo "><ul><li>Keig Community Hall</li><li>Keig</li><li>Alford</li><li>AB33 8BH
</li></ul></span></div><div class="column evenrowcolor location ">Alford </div><div class="column notes ">Drop-In Facebook tuttifruttiyogaclasses.Drop-In Facebook tuttifruttiyogaclasses. Drop-In Facebook tuttifruttiyogaclasses. Drop-In Facebook tuttifruttiyogaclasses.  </div></div></div></div></div></div></div></div></div>            </div>

    </div>
</div>
<!-- end container -->
</div>

CSS(更少)

/*
 * Define the widths: play around with these 
 * to get a best fit.
 */
@index-width: 0px;
@teacher-width: 240px;
@class-type-width: 250px;
@day-width: 150px;
@times-width: 150px;
@venue-width: 150px;
@location-width: 140px;
@notes-width:140px;
@icon-width: 0px;
@date-width: 0px;
@margin-width: 85px;

/*
 * Basic styles, good for a large display. Everything fits in
 * one row, no wrapping. All text based cells grow equally.
 */
// Main container - row container
.table-row {
  display: flex;          display: -webkit-flex;
  flex-direction: row;    -webkit-flex-direction: row;
  flex-wrap: wrap;     -webkit-flex-wrap: wrap;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  align-items:center;
  justify-content:center;

}

// Wrappers around cells and other wrappers
.wrapper {
  display: flex; display: -webkit-flex;
  flex-direction: row; -webkit-flex-direction: row;

  justify-content:center;
}

// leaf level containers (cells): common properties 
.column {
  flex-grow: 0; -webkit-flex-grow: 2;
  flex-shrink: 0; -webkit-flex-shrink: 0;
  vertical-align: top;
  padding-right:5px;
  padding-left:20px;
}

.material-icons{vertical-align:middle !important;}


.column:not(.teacher,.class-type,.venue,.day) {
 padding-left:0px;
}

// leaf level containers: widths
.index { width: @index-width; }
.teacher { width: @teacher-width; }
.day { width: @day-width; }
.times { width: @times-width; }
.venue { width: @venue-width; }
.location { width: @location-width; }
.notes { width: @notes-width; }
.watch, .add-class-type { width: @icon-width; }
.date { width: @date-width; }

// leaf level containers (cells): special properties 
.index {
  text-align: center;
}

.teacher {
  font-weight: bold;
  color: #337AB5;
  border: 1px solid transparent;


}

.class-type {
  width: @class-type-width;
}

// these are growable text containers, with ellipsis to show truncated text
.1teacher, .1class-type {
  flex-grow: 1; -webkit-flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 4px;
}

.date {
  width: @date-width;
  text-align: right;
  padding-right: 4px;
}

/* growable wrappers */
/*
 .teacher-class-type-day-times, .attributes {
  flex-grow: 1; -webkit-flex-grow: 1;
}
*/

/*
 * Media queries: optimize for different screen widths.
 */

// Wrapper widths
@teacher-class-type-width: max(@teacher-width, @class-type-width);
@day-times-width: max(@day-width, @times-width);
@venue-location-width: max(@venue-width, @location-width);
@teacher-class-type-day-times-width: max(@teacher-width, @class-type-width,
  (@day-width + @times-width) );
@venue-location-notes-width: max(@venue-width, @location-width, 
  @notes-width);
@all-attributes-width: max(@teacher-width, @class-type-width, 
  (@day-width + @times-width), (@venue-width + @location-width));

.horizontal() {
  flex-direction: row;        -webkit-flex-direction: row;
}

.vertical() {
  // Let the wrapper flex vertically, so we get 2 rows
  flex-direction: column;     -webkit-flex-direction: column;
  // can't have the children grow, since this now means vertical growth
  div {
    flex-grow: 0;  -webkit-flex-grow: 0;
  }
}

.vertical-growing() {
  .vertical();
  > div {
    // Let immediate child divs grow horizontally, 100% to fill the wrapper
    width: 100%;
  }
}

/*
 * Media breaks.
 @margin-width * 2 + 
 */

// First break: as many 2-row fields as possible. This will leave notes
// and Dates still horizontal, as they are odd numbered
@media all and (max-width: (@margin-width * 2 + @index-width
  + @teacher-width + @class-type-width + @day-width + @times-width
  + @venue-width + @location-width + @notes-width + @icon-width * 2
  + @date-width * 3) ) {

  .teacher-class-type {
    .vertical-growing();
    width: @teacher-class-type-width;
  }
  .day-times, .venue-location {
    .vertical();
  }
}

// Next: as many 3-rows as possible
@media all and (max-width: (@margin-width * 2 + @index-width
  + @teacher-class-type-width + @day-times-width
  + @venue-location-width  + @notes-width
  + @icon-width * 2 + @date-width * 3) ) {

  // Change day-report back to horizontal, keep it under teacher and class-type
  // So, we have 3 rows: teacher, class-type, day-times
  .day-times {
    .horizontal();
  }
  .teacher-class-type-day-times {
    .vertical-growing();
    width: @teacher-class-type-day-times-width;
  }

  // Line up venue, location, notes into the next column
  .venue-location-notes {
    .vertical();
  }
  // Line up all icons in one column, even though there's only two of them
  .icons {
    .vertical();
  }
  // Line up all dates in one column
  .dates {
    .vertical();
  }

   .wrapper {
    align-items:left !important;
  justify-content:left !important;
  }
}

// Last break: 4 columns: index, attributes, icons, dates
@media all and (max-width: (@margin-width * 2 + @index-width
  + @teacher-class-type-day-times-width + @venue-location-notes-width
  + @icon-width + @date-width) ) {

  // looks better with a little padding on mobile devices
  .table-row {
    padding-left: 4px;
    padding-right: 4px;
     align-items:left !important;
  justify-content:left !important;
  }

  // All attributes: teacher, class-type, day-times, venue-location, notes
  .attributes {
    .vertical-growing();
    width: @all-attributes-width;
  }
  .day-times, .venue-location {
    .horizontal();
  }
  .wrapper {
    align-items:left !important;
  justify-content:left !important;
  }
}



#CenterOurTable {
 max-width:1400px !important;
 margin:0 auto; 
 display: flex;          display: -webkit-flex;
  flex-direction: column;    -webkit-flex-direction: column;
background-color:orange;

}

Answer 1

您的主要问题是 .table-row 上的填充。您将表行宽度设置为 100%，但也有填充，它会扩展到其容器之外。

你可以去掉填充，或者设置你的宽度来偏移填充，比如 width: calc(100% - 30px)

在那之后你还有另一个问题 - 你的注释栏中有一些长词默认情况下不会中断并且它们会溢出。要解决这个问题，您必须设置 word-break: break-all

编辑: 举个例子，如果你考虑重组你的标记以使列的排列更容易，我可能会把它作为一个列的容器，每个列都有它们的标题 - 并使用 flex-basis: 140px; max-width: 140px 做固定宽度，并 flex 其他宽度。

.row, .col { 
  display: flex;
  flex: 1 1 0
}

.row {
  flex-direction: horizontal
}

.col {
  flex-direction: column
}

.col:first-child {
  align-items: center
}

.notes {
  flex-basis: 200px;
  max-width: 200px;
}

<div class="row">
  <div class="col">
    <div>HEADER (Flex)</div>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="col notes">
    <div>HEADER (Fixed 200px)</div>
    <p>has survivchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>