Хотите, чтобы левый div соответствовал размеру содержимого div, даже если у левого div больше данных

Question

Я строю макет для своего сайта, для которого я использую css-grid. Я открыт для использования flexbox, если это решает мою задачу. У меня есть заголовок, нижний колонтитул, левый виджет, правый виджет и основной раздел (div). Я хочу, чтобы макет занимал весь экран. Если основной раздел расширяется в зависимости от его содержимого, я хочу, чтобы левый и правый виджеты соответствовали его размеру.

P.S. Левый и правый виджеты могут содержать больше содержимого, чем основное содержимое, в этом случае я хочу использовать полосу прокрутки в левом и правом виджетах

Я пробовал это с использованием css-grid, но левый правый и основной раздел принимают размер наибольшего div.

.container {
  display: grid;
  grid-template-areas: 'header header header' 'left main right' 'footer footer footer';
  grid-template-rows: 3vh minmax(93vh, auto) 3vh;
}

.header {
  grid-area: header;
  border: 1px solid black;
  background: blue;
}

.leftWidget {
  grid-area: left;
  border: 1px solid black;
  background: red;
}

.rightWidget {
  grid-area: right;
  border: 1px solid black;
  background: green;
}

.main {
  grid-area: main;
  border: 1px solid black;
  background: yellow;
}

.footer {
  grid-area: footer;
  border: 1px solid black;
  background: blue;
}

<div class=container>
  <div class=header>

  </div>
  <div class=leftWidget>

  </div>
  <div class=main>

  </div>
  <div class=rightWidget>

  </div>
  <div class=footer>
  </div>
</div>

Answer 1

Вы можете внести следующие изменения в свой код:

• использовать auto (вместо 93vh) для второго ряда, чтобы он занимал пространство своего содержимого,

• и вместо 3vh высоты для верхнего и нижнего колонтитула , вы можете использовать фиксированную высоту (скажем, 3em),

• добавить определение grid-template-columns: 1fr 1fr 1fr для 3 одинаковых столбцов, которое позволяет боковым панелям и области содержимого иметь одинаковую ширину.

См. Демонстрацию ниже содержимого в боковых панелях меньше, чем в области содержимого - это работает, потому что область содержимого имеет большую высоту:

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas: 'header header header' 
                       'left main right' 
                       'footer footer footer';
  grid-template-rows: 3em auto 3em; /* middle row occupies space of its contents */
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
}

.header {
  grid-area: header;
  border: 1px solid black;
  background: blue;
}

.leftWidget {
  grid-area: left;
  border: 1px solid black;
  background: red;
}

.rightWidget {
  grid-area: right;
  border: 1px solid black;
  background: green;
}

.main {
  grid-area: main;
  border: 1px solid black;
  background: yellow;
}

.footer {
  grid-area: footer;
  border: 1px solid black;
  background: blue;
}

<div class=container>
  <div class=header>Header</div>
  <div class=leftWidget>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
  </div>
  <div class=main>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here 
  </div>
  <div class=rightWidget>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
  </div>
  <div class=footer>Footer</div>
</div>

---

Чтобы гарантировать, что высота среднего ряда определяется элементом main, вы можете использовать и дополнительную обертку внутри боковых панелей и использовать абсолютное позиционирование - см. Демонстрацию ниже:

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas: 'header header header' 
                       'left main right' 
                       'footer footer footer';
  grid-template-rows: 3em auto 3em;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
}

.header {
  grid-area: header;
  border: 1px solid black;
  background: blue;
}

.leftWidget {
  grid-area: left;
  border: 1px solid black;
  background: red;
  overflow: auto;
  position: relative;
}

.rightWidget {
  grid-area: right;
  border: 1px solid black;
  background: green;
  overflow: auto;
  position: relative;
}

.leftWidget > div,
.rightWidget > div {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.main {
  grid-area: main;
  border: 1px solid black;
  background: yellow;
}

.footer {
  grid-area: footer;
  border: 1px solid black;
  background: blue;
}

<div class="container">
  <div class="header">Header</div>
  <div class="leftWidget">
    <div>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
    </div>
  </div>
  <div class="main">
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
  </div>
  <div class="rightWidget">
    <div>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here 
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

---

Если вы хотите иметь минимальную высоту контейнера сетки и иметь вышеуказанный эффект только после этого, просто добавьте height: 100vh к контейнеру:

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-areas: 'header header header' 
                       'left main right' 
                       'footer footer footer';
  grid-template-rows: 3em auto 3em;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  height: 100vh;
}

.header {
  grid-area: header;
  border: 1px solid black;
  background: blue;
}

.leftWidget {
  grid-area: left;
  border: 1px solid black;
  background: red;
  overflow: auto;
  position: relative;
}

.rightWidget {
  grid-area: right;
  border: 1px solid black;
  background: green;
  overflow: auto;
  position: relative;
}

.leftWidget > div,
.rightWidget > div {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.main {
  grid-area: main;
  border: 1px solid black;
  background: yellow;
}

.footer {
  grid-area: footer;
  border: 1px solid black;
  background: blue;
}

<div class="container">
  <div class="header">Header</div>
  <div class="leftWidget">
    <div>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
    </div>
  </div>
  <div class="main">
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
  </div>
  <div class="rightWidget">
    <div>
    Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here 
    </div>
  </div>
  <div class="footer">Footer</div>
</div>

Answer 2

@ kukkuz - Я следовал вашей ранее предложенной скрипке. Это работало нормально для меня. Спасибо. Может быть, вы удалили скрипку, но я следовал за ней. Я публикую код здесь снова, если кому-то понадобится в будущем. Я сделал некоторые основные настройки, чтобы соответствовать моим потребностям.

body {
    margin: 0;
  }

  .container {
    display: grid;
    grid-template-areas: 'header header header' 'left main right' 'footer footer footer';
    grid-template-rows: minmax(60px,4vh) 1fr minmax(40px,3vh);
    grid-template-columns: minmax(150px,12vw) minmax(700px,1fr) minmax(200px,15vw);
    height: 100vh;
  }

  .header {
    grid-area: header;
    border: 1px solid black;
    background: blue;
  }

  .leftWidget {
    grid-area: left;
    border: 1px solid black;
    background: red;
    overflow: auto;
  }

  .rightWidget {
    grid-area: right;
    border: 1px solid black;
    background: green;
    overflow: auto;
  }

  .main {
    grid-area: main;
    border: 1px solid black;
    background: yellow;
  }

  .footer {
    grid-area: footer;
    border: 1px solid black;
    background: blue;
  }

Код кредита - @ kukkuz