填充父div的宽度甚至溢出滚动

Question

我有一张桌子，每行都有另一张桌子。我对移动视图使用滚动溢出，这使得行无法填充最大可用大小，并且在使用滚动表时没有背景。

我已经尝试过

width: fit-content

和

min-width: 100%

，但它的效果并不如我希望的那样填充所有可用空间并且每行具有相等的宽度。

我希望行具有其父行的完整宽度。

.container {
  max-width: 700px;
  margin: 0 auto;
  background: #FFF;
  padding: 1rem;
  border-radius: 1rem;
}

.table1 {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
}

.table1__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .5rem;
}

.table1__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table1__body__row {
  border: 1px solid red;
  padding: .5rem;
  border-radius: .25rem;
}

.table1__body__row:not(.table1__body__row:last-child) {
  margin-bottom: 1rem;
}

.table1__body__row__cols {
  display: flex;
  gap: 32px;
}

.table1__body__row__cols>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2 {
  margin-top: .5rem;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
}

.table2__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .25rem .5rem;
}

.table2__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2__body__row {
  display: flex;
  gap: 32px;
  border: 1px solid blue;
  padding: .5rem;
  border-radius: .25rem;
}

.table2__body__row>div {
  flex: 1 0 120px;
  min-width: 120px;
}

<div class="container">
  <div class="table1">
    <div class="table1__head">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
    </div>
    <div class="table1__body">
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
      </div>
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
        <div class="table2">
          <div class="table2__head">
            <div>item 1</div>
            <div>item 2</div>
            <div>item 3</div>
            <div>item 4</div>
            <div>item 5</div>
            <div>item 6</div>
            <div>item 7</div>
          </div>
          <div class="table2__body">
            <div class="table2__body__row">
              <div>table value item 1</div>
              <div>table value item 2</div>
              <div>table value item 3</div>
              <div>table value item 4</div>
              <div>table value item 5</div>
              <div>table value item 6</div>
              <div>table value item 7</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可能需要将

display: table;

添加到

.container

。

.container {
  max-width: 700px;
  margin: 0 auto;
  background: #FFF;
  padding: 1rem;
  border-radius: 1rem;
  display: table;
}

.table1 {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
}

.table1__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .5rem;
}

.table1__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table1__body__row {
  border: 1px solid red;
  padding: .5rem;
  border-radius: .25rem;
}

.table1__body__row:not(.table1__body__row:last-child) {
  margin-bottom: 1rem;
}

.table1__body__row__cols {
  display: flex;
  gap: 32px;
}

.table1__body__row__cols>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2 {
  margin-top: .5rem;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
}

.table2__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .25rem .5rem;
}

.table2__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2__body__row {
  display: flex;
  gap: 32px;
  border: 1px solid blue;
  padding: .5rem;
  border-radius: .25rem;
}

.table2__body__row>div {
  flex: 1 0 120px;
  min-width: 120px;
}

<div class="container">
  <div class="table1">
    <div class="table1__head">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
    </div>
    <div class="table1__body">
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
      </div>
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
        <div class="table2">
          <div class="table2__head">
            <div>item 1</div>
            <div>item 2</div>
            <div>item 3</div>
            <div>item 4</div>
            <div>item 5</div>
            <div>item 6</div>
            <div>item 7</div>
          </div>
          <div class="table2__body">
            <div class="table2__body__row">
              <div>table value item 1</div>
              <div>table value item 2</div>
              <div>table value item 3</div>
              <div>table value item 4</div>
              <div>table value item 5</div>
              <div>table value item 6</div>
              <div>table value item 7</div>
            </div>
          </div>
        </div>
      </div>
      <div class="table1__body__row">
        <div class="table1__body__row__cols">
          <div>table value item 1</div>
          <div>table value item 2</div>
          <div>table value item 3</div>
          <div>table value item 4</div>
          <div>table value item 5</div>
          <div>table value item 6</div>
        </div>
      </div>
    </div>
  </div>
</div>