Правильный размер двухколонной сетки внутри вертикально процелегих контейнера на не разбесной странице ⇐ CSS

[Anonymous]

Я разработал веб-страницу, чтобы быть не подключим: весь контент масштабируется, чтобы соответствовать доступному Viewport. Я хотел бы представить список недавних изменений (потенциально длинных) внутри Div, который достаточно широкий, чтобы приспособить содержание без необходимости горизонтальной прокрутки (

Код: Выделить всё

width: fit-content

). Div должен удлиняться, чтобы разместить как можно большую часть списка, не простираясь за пределы страницы, с вертикальной половой прокруткой, если это необходимо (при необходимости (

Код: Выделить всё

overflow-y: auto

).
Мое решение работает как для Safari, так и для Chrome в macOS. Тем не менее, Firefox, по-видимому, не учитывает ширину вертикальной прокрутки при расчете ширины: FIT-Content . Таким образом, содержимое превышает ширину и добавляет горизонтальную прокрутку, чтобы отобразить остаток. «), Firefox вычисляет ширину достаточно, и горизонтальная прокрутка не требуется. Но я бы предпочел поведение переполнения-y: auto и устранить прокрутку, если не нужно. WhatsNew-Container ? Обновление: Я уверен, что здесь обсуждается горизонтальная часть проблемы. Но мне все еще нужен ответ на вертикальную часть размера. />

Код: Выделить всё

* {
box-sizing: border-box;
}

html {
background-color: #dbd2c3;
height: 100%;
width: 100%;
}

body {
/* outline: 4px dashed red; */
/* outline-offset: -4px; */

font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
margin: 0;
/* prevent body from displacing */
padding: 0;
height: 100%;
/* limit to height of html */
width: 100%;
}

.outer-div {
/* outline: 2px solid black; */
/* outline-offset: 0; */

display: flex;
flex-flow: column;
height: 100%;
/* limit to size of height of body */
margin: 0 0.5em;
/* inset left/right margins from body */
}

/**** TOP DIV FULL WIDTH FOR LOGO ****/
.top-div {
background: yellow;
}

/**** REMAINDER OF WINDOW IS SPLIT LEFT/RIGHT ****/
.split-div {
/* outline: 2px solid green; */
/* outline-offset: 0; */

display: flex;
flex-flow: row;
width: 100%;
height: 100%;
overflow: hidden;
}

/**** LEFT SIDE ****/
.left-side {
flex: 45;
background: pink;
}

/**** GUTTER ****/
.gutter {
flex: 5;
background: gray;
}

/**** RIGHT SIDE FOR SLIDESHOW ****/
.right-side {
flex: 50;
background: cyan;
}

/**** LEFTSIDE CONTENT ****/
.welcome-div {
margin-top: 15px;
/* Gap above Welcome blurb */
line-height: 1.4;
/* line separation is 1.4 x normal */
margin-bottom: 15px;
/* Gap beneath Welcome blurb */
}

/**** This container should grow vertically as needed to the bottom of the
window, with a margin of 10 px. It should be wide enough to show
contents without the need for horizontal scrolling.  If the contents
exceed container height, they should be scrollable.

Content is a two-column-wide grid with arbitrary number of rows.
****/
#whatsnew {
outline: 1px solid red;
outline-offset: -1px;
}

.whatsnew-container {
outline: 1px solid blue;
display: grid;
grid-template-columns: auto auto;
width: fit-content;
/**** what should this be? ****/
height: 300px;
/**** what should this be? ****/
overflow-y: auto;
/* vertical scrollbars if needed */
padding: 10px;
border: 1px solid #888;
}

.leftcell {
/* outline: 1px solid green; */
margin-right: 8px;
}

.rightcell {
outline: 1px solid green;
white-space: nowrap;
/* don't wrap whatsnew text */
}

.spacer {
/* outline: 1px solid red; */
padding-bottom: 6px;
}< /code>









Top of page (full-width)





Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.




Recent site updates:

2/13/2025
Foobar/XX for Foobar Quuxly
2/19/95

Foobar/XX for Foobar Quuxly
2/20/95

Foobar/XX for Foobar Quuxly
2/21/95

Foobar/XX for Foobar Quuxly
4/4/95

Foobar/XX for Foobar Quuxly
4/5/95

Foobar/XX for Xyzzy Foobar Band extra
extra long line
4/14/95

Foobar/XX for Xyzzy Foobar Band
4/15/95

Foobar/XX for Xyzzy Foobar Band
4/21/95

Foobar/XX for Xyzzy Foobar Band
4/22/95

Foobar/XX for Xyzzy Foobar Band
4/23/95

Foobar/XX for Foobar Quuxly
6/2/95

Foobar/XX for Foobar Quuxly
6/3/95

Foobar/XX for Foobar Quuxly
6/4/95

Foobar/XX for Foobar Quuxly
6/30/95

2/12/2025
Foobar/XX for Legion of Mary
6/26/75

Notes for Bobby &  The Midnites
2/11/82

Notes for Foobar Quuxly
2/16/82

Notes for Foobar Quuxly
2/17/82

2/10/2025
Foobar/XX for Foobar Quuxly
11/18/66

Foobar/XX for Foobar Quuxly
11/19/66

2/6/2025
Audio for Foobar Quuxly
1/18/78

2/4/2025
Setlist for Robert Hunter & The Dinosaurs
6/1/84

Audio for Robert Hunter & The Dinosaurs
6/1/84

Foobar/XX for Robert Hunter
6/3/84

Foobar/XX for Xyzzy Foobar & John Kahn
6/3/84

2/3/2025
Notes for Foobar Quuxly
2/7/79

Ticket for Xyzzy Foobar Band
2/24/80

Ticket for Xyzzy Foobar &  John Kahn
6/5/82

Ticket for Robert Hunter
10/20/86

Notes for Robert Hunter
10/20/86

2/1/2025
Audio for Foobar Quuxly
2/6/79

Video for Foobar Quuxly
9/14/90

1/21/2025
Video for Foobar Quuxly
7/2/87

Video for Xyzzy Foobar Band
11/11/94

1/20/2025
Video for Foobar Quuxly
7/23/90

1/10/2025
Foobar/XX for Foobar Quuxly
3/23/91

Foobar/XX for Foobar Quuxly
3/24/91

Foobar/XX for Foobar Quuxly
3/25/91

Foobar/XX for Foobar Quuxly
3/27/91

Foobar/XX for Foobar Quuxly
3/28/91

Foobar/XX for Foobar Quuxly
3/29/91

1/9/2025
Video for Foobar Quuxly
3/18/90

1/8/2025
Foobar/XX for Foobar Quuxly
6/26/88

 
  
 










 
 

 

Подробнее здесь: https://stackoverflow.com/questions/794 ... er-on-a-no