CODEWITHSUNDEEP
htmlcssflexbox
STUCKED
STUCKED

Reputation: 83

Dynamic Flexbox width

Hello I'm having problems to solve this layout using css flex-box. I want to use ellipse in texts, but If I have a long content of text it push the other elements out of the box.

enter image description here

If I remove the display: flex of content-2-wrapper it seems to work. But I want to know if its possible to have a dynamic width of content-2-wrapper depending of the container width. And use with this the ellipsis in texts.

I add the code:

.container {
  max-width: 300px;
  width: 100%;
  padding: 16px;
  background-color: magenta;
  
}

.d-flex {
  display: flex;
  padding: 16px;
  flex-wrap: nowrap;
}

.content-1 {
  background-color: red;
  padding: 16px;
}

.content-2-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-2a {
  background-color: blue;
  padding: 16px;
}

.content-2b {
  background-color: gray;
  padding: 16px;
}

.content-3 {
  background-color: yellow;
  padding: 16px;
}

.content-4 {
  background-color: green;
  padding: 16px;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="container">
  <div class="d-flex">
    <div class="content-1">
      1
    </div>
    <div class="content-2-wrapper">
      <div class="content-2a ellipsis">
        Very long content that breake my flex layout
      </div>
      <div class="content-2b ellipsis">
        second-content
      </div>
    </div>
    <div class="content-3 ellipsis">
      another content
    </div>
    <div class="content-4 ellipsis">
      last content
    </div>
  </div>
</div>

Upvotes: 1

Views: 1124

Answers (1)

Geat
Geat

Reputation: 1209

There's just two things you need to do:

  • Set min-width: [something] on the immediate flex children. If you don't set a value, auto is used by default.
  • Set box-sizing: border-box on .d-flex and any other element that has a width/min-width and defined padding.

.container {
  max-width: 300px;
  width: 100%;
  padding: 16px;
  background-color: magenta;
  
}

.d-flex {
  display: flex;
  padding: 16px;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.content-1 {
  background-color: red;
  padding: 16px;
  min-width: 25%;
  box-sizing: border-box;
}

.content-2-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 25%;
}

.content-2a {
  background-color: blue;
  padding: 16px;
}

.content-2b {
  background-color: gray;
  padding: 16px;
}

.content-3 {
  background-color: yellow;
  padding: 16px;
  min-width: 25%;
  box-sizing: border-box;
}

.content-4 {
  background-color: green;
  padding: 16px;
  min-width: 25%;
  box-sizing: border-box;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="container">
  <div class="d-flex">
    <div class="content-1">
      1
    </div>
    <div class="content-2-wrapper">
      <div class="content-2a ellipsis">
        Very long content that breake my flex layout
      </div>
      <div class="content-2b ellipsis">
        second-content
      </div>
    </div>
    <div class="content-3 ellipsis">
      another content
    </div>
    <div class="content-4 ellipsis">
      last content
    </div>
  </div>
</div>

Upvotes: 1

Related Questions