[ANSWERED] html – How to get nested css flex to have the right width after wrap in this setup?

Question 1

you could simply add a max-width:300px; to .links and have the box in size but then you couldn’t have the desired stacking effect you wanted so i went a bit further and with the help of css variables and media queries and adding a class .single to single .pars which didn’t have a .ref after them, i came up with this:

:root {
  --ref-size: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: gray;
}

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: lightblue;
  padding: 3px
}

.links {
  min-width: 300px;
  display: flex;
  flex-flow: row wrap;
  padding: 3px;
  background-color: orange;
}

.par {
  width: calc(100% - var(--ref-size));
  background-color: red;
}

.ref {
  background-color: olive;
  width: var(--ref-size);
}

.item {
  width: 80vw;
  max-width: 300px;
  background-color: steelblue
}
@media all and (max-width:300px){
  .par{
    width: 100%;
  }
}
@media all and (min-width: 300px){
  .par.single{
    width: 100%;
  }
}

<div class="main">
  <div class="Container">
    <div class="item links">
      header
    </div>
    <div class="links">
      <div class="par single">
        some text
      </div>
    </div>
    <div class="links">
      <div class="par single">
        some text
      </div>
    </div>
    <div class="links">
      <div class="par single">
        some text
      </div>
    </div>
    <div class="item links">
      another header
    </div>
    <div class="links">
      <div class="par">
        some text
      </div>
      <div class="ref">
        a ref
      </div>
    </div>
    <div class="links">
      <div class="par single">
        some text
      </div>
    </div>
    <div class="links">
      <div class="par">
        some text
      </div>
      <div class="ref">
        a ref
      </div>
    </div>
  </div>
</div>

Question 2

I have this mockup, there are some nested containers. some of the link-class have multiple elements (par and ref) and I want them to display next to each other if there’s space, but responsively move them below each other when total width gets smaller.

It works somewhat, but I expect (want) the link-element containing two childs to return to the same width as the link-element with one single child as it wraps.

For some reason, it remains wider than the single-child ones.

Any hints appreciated!

Code:

let name = 'world';

:global(body) {
  margin: 0;
  padding: 0
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: gray;
}

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: lightblue;
  padding: 3px
}

.linkContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background-color: salmon;
}

.par {
  width: 80vw;
  max-width: 300px;
  background-color: red
}

.links {
  display: flex;
  flex-flow: row wrap;
  padding: 3px;
  background-color: orange
}

.ref {
  background-color: olive;
  width: 30vw;
  max-width: 100px
}

.item {
  width: 80vw;
  max-width: 300px;
  background-color: steelblue
}

<div class="main">
  <div class="Container">
    <div class="item">
      header
    </div>
    <div class="linkContainer">
      <div class="links">
        <div class="par">
          some text
        </div>
      </div>
      <div class="links">
        <div class="par">
          some text
        </div>
      </div>
      <div class="links">
        <div class="par">
          some text
        </div>
      </div>
      <div class="Container">
        <div class="item">
          another header
        </div>
        <div class="linkContainer">
          <div class="links">
            <div class="par">
              some text
            </div>
            <div class="ref">
              a ref
            </div>
          </div>
          <div class="links">
            <div class="par">
              some text
            </div>
          </div>
          <div class="links">
            <div class="par">
              some text
            </div>
            <div class="ref">
              a ref
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bollate

[ANSWERED] html – How to get nested css flex to have the right width after wrap in this setup?

By

Solution 1 :

Problem :

By

Related Post

[ANSWERED] html – select all elements within a parent class

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate