html/css - 具有固定宽度侧边栏的灵活内容块

Question

为了使我的问题更加直观，我添加了一些具有不同场景的图像。它应该是这样工作的：

#1 - 内容块的 x 为 min-width，列适合此宽度，因此保持不变。
#2 - 内容块需要更多 space 因为添加了更多列并且它适合 max-width
#3 - 内容块达到 max-width 因为添加了更多的列，列现在正在缩小以适应 max-width.

.app {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.navigation {
  background-color: purple;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 18rem;
}

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

.navigation__primary li {
      flex: 1;
}

.main {
  background-color: yellow;
  flex: 1;
  padding: 0.5rem;
  display: inline-flex;
  justify-content: center;
}

.main__wrapper {
  background-color: red;
  max-width: calc(100% - 16rem);
  padding: 1rem; 
}

.week {
  background-color: green;
  display: flex;
}

.week__col {
  flex: 1 1 120px; /* this doesn't work */
}



/* RESET */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body, html {
  height: 100%;
}

body {
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  text-decoration: none;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

em {
  font-weight: 600;
  font-style: normal;  
}

  <div id="app" class="app">
    <nav class="navigation">
      <ul class="navigation__primary">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
      </ul>
      <a class="navigation__logo">1</a>
    </nav>
    <main class="main">
      <div class="main__wrapper">
        <div class="week">
          <div class="week__col">1</div>
          <div class="week__col">2</div>
          <div class="week__col">3</div>
          <div class="week__col">4</div>
          <div class="week__col">5</div>
        </div>
      </div>
    </main>
  </div>

Answer 1

CSS网格可以做到这一点。

这里只是代码的相关部分：

.container {
  display:grid;
  max-width:400px; /* your max-width */
  width: max-content; /* fit the content*/
  grid-auto-flow:column; /* column flow */
  grid-auto-columns:1fr; /* all column equal size */
  border:2px solid;
  margin:20px auto;
  gap:10px;
}

.container > div {
  background:red;
  overflow:hidden; /* hide the pseudo element overflow when columns get smaller */
  height:60px;
}
.container > div:before {
  content:"";
  display:block;
  width:50px; /* the starting width of your column */
}

<div class="container">
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>


<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

html/css - 具有固定宽度侧边栏的灵活内容块

html/css - Flexible content block with fixed width sidebar

html

css

responsive