问题描述
我在jsfiddle中简化了HTML / CSS，这是我试图实现的目标，但没有成功。
我无法使.problem占据全角。内容以蓝色背景表示，而框本身为红色。
我正在尝试使所有可滚动内容均具有全宽和蓝色背景，因为我猜想在可滚动内容后没有出现背景是宽度问题。
到目前为止，我已经看过的内容：
Flexbox: how to get divs to fill up 100% of the container width without wrapping?
Fill 100% width of scrolling flex container
要澄清：给定.problem的宽度确实可以得到我想要的效果，但不能得到解决方案，因为内容是动态的，我不知道其宽度。
*{
margin: 0;
padding: 0;
Box-sizing: border-Box;
position: relative;
}
html,body{
width: 100%;
height: 100%;
}
.bg{
display: flex;
background-color: gray;
width: 100%;
height: 100%;
}
.usable{
display: flex;
height: 90%;
width: 100%;
background-color: white;
}
.Box{
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 300px;
display: flex;
align-items: flex-start;
align-content: flex-start;
flex-direction: column;
background-color: red;
}
.top{
display: flex;
height: 20px;
background-color: yellow;
width: 100%;
}
.bottom{
width: 100%;
flex: 0 1 100%;
overflow: auto;
}
.contents{
height: 100%;
display: flex;
flex-direction: column;
}
.forms{
flex: 0 1 100%;
}
.problem{
display: flex;
height: 100%;
background-color: blue;
}
.row{
display: flex;
align-items: center;
}
.cell{
align-self: stretch;
flex: 1 0 100px;
}<div class="bg">
<div class="usable">
<div class="Box">
<div class="top">
Top
</div>
<div class="bottom">
<div class="contents">
<div class="forms">
<div class="problem">
<div class="data">
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 00:21:06</div>
<div class="cell">test1</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:42:26</div>
<div class="cell">test2</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:42:26</div>
<div class="cell">test3</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:42:37</div>
<div class="cell">test4</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:42:37</div>
<div class="cell">test5</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:42:37</div>
<div class="cell">test6</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:42:37</div>
<div class="cell">test7</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:42:58</div>
<div class="cell">test8</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:42:58</div>
<div class="cell">test9</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
<div class="row">
<div class="cell">2020-06-28 01:34:46</div>
<div class="cell">2020-08-13 13:43:11</div>
<div class="cell">test10</div>
<div class="cell"></div>
<div class="cell">Basic User</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>解决方法
问题是带有蓝色背景的容器占用了父对象的宽度而不是内容的宽度，要解决此问题，可以将其属性“ display”更改为“ inline-flex”。
然后，如果将.cell类的“ flex”属性更改为“ width”属性，则您设置的宽度将计入父级，它将到达蓝色容器，使其填充所有内容。
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
int main(){
FILE * fr = fopen("file.txt","r");
char string[100];
if((fr = fopen("file.txt","r")) == NULL){
printf("Error! Opening file");
exit(1);
}
while (fgets(string,100,fr) != NULL){
printf("%s",string);
// printf("Write word to extract: ");
// scanf("%s",ch);
fclose(fr);
}
要允许元素根据内容增长，可以将“ width”替换为“ min-width”。 这可以确保您的盒子具有一定的大小，以用于样式设计，但可以使其增长。 然后，您可以使用“最大宽度”来限制其增长量。
因此，将“宽度：100％”更改为“最小宽度：100％”。
您可以在此处找到更多信息：https://css-tricks.com/boxes-fill-height-dont-squish/