Растянуть гибкий элемент с переполненным содержимым на всю доступную ширину его контейнера - PullRequest
Новая
       15

Растянуть гибкий элемент с переполненным содержимым на всю доступную ширину его контейнера

0 голосов
/ 23 сентября 2019

У меня есть такой макет:

HTML: 

<html>
  <head>
  </head>
  <body>
    <div class="container">
    <div class="left-container">
      SIDEBAR
    </div>
    <div class="right-container">
      <div class="header">
        <div class="header-item">
          HEADER ITEM 1
        </div>
        <div class="header-item">
          HEADER ITEM 2
        </div>
      </div>
      <div class="dashboard">
        <div class="nav">
          SOME INNER NAVIGATION
        </div>
        <div class="table-container">
        TABLE CONTAINER
          <div class="table">
            TABLE
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

CSS: 

.container {
  display: flex;
  margin: auto;
  max-width: 1300px;
  padding: 15px;
  background: lightpink;
}

.left-container {
  width: 300px;
  background: lavender;
  margin-right: 50px;
}

.right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  display: flex;
  background: lightblue;
  width: 100%;
}

.header-item {
  flex: 1 1 auto;
}

.dashboard {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  max-width: 100%;
}

.nav {
  background: lightgrey;
}

.table-container {
  margin-top: 30px;
  background: lavenderblush;
  padding: 5px;
  width: 100%;
  width: 900px;
  overflow-x: scroll;

}

.table {
  background: lightsalmon;
  width: 1500px;
  height: 100px;
}

Также на codepen .

Таблица внутри table-container шире, поэтому я хочу получить overflow-x: scroll.Дело в том, что сейчас у класса table-container ширина указана в пикселях, width: 900px.Это хорошо работает, но я бы хотел растянуть его на всю доступную ширину div с классом dashboard.Однако, если я добавлю width: 100% к table-container, он разрушит макет и простирается за пределы div с классом dashboard вместе со всеми остальными div-элементами.

Items stretch outside of the container

Кажется, что исправление должно быть простым, но пока я не увенчался успехом.

1 Ответ

1 голос
/ 23 сентября 2019

Ваша идея использовать width:100% на table-container верна.Но также используйте overflow: hidden (или overflow-x) на right-container, чтобы макет не был изменен.

Надеюсь, я правильно понял, что вы хотели.Пожалуйста, проверьте фрагмент ниже. 

.container {
  display: flex;
  margin: auto;
  max-width: 1300px;
  padding: 15px;
  background: lightpink;
}

.left-container {
  width: 300px;
  background: lavender;
  margin-right: 50px;
}

.right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow:hidden;
}

.header {
  display: flex;
  background: lightblue;
  width: 100%;
}

.header-item {
  flex: 1 1 auto;
}

.dashboard {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  max-width: 100%;
}

.nav {
  background: lightgrey;
}

.table-container {
  margin-top: 30px;
  background: lavenderblush;
  padding: 5px;
  width: 100%;
  width: 100%;
  overflow-x: scroll;
  
}

.table {
  background: lightsalmon;
  width: 1500px;
  height: 100px;
}
    <div class="container">
    <div class="left-container">
      SIDEBAR
    </div>
    <div class="right-container">
      <div class="header">
        <div class="header-item">
          HEADER ITEM 1
        </div>
        <div class="header-item">
          HEADER ITEM 2
        </div>
      </div>
      <div class="dashboard">
        <div class="nav">
          SOME INNER NAVIGATION
        </div>
        <div class="table-container">
        TABLE CONTAINER
          <div class="table">
            TABLE
          </div>
        </div>
      </div>
    </div>
    </div>
...